初识Vue CLI

55 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第31天,点击查看活动详情

Vue CLI

Vue CLI 是 Vue 的脚手架工具,它可以帮助我们快速生成 Vue 基础项目代码,提供开箱即用的功能特性。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

安装

依赖要求: Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

使用 vue --version 确认是否安装成功

image.png

使用 vue --help 查看使用帮助。

image.png

创建项目

如果你还没有安装 VueCLI,请执行下面的命令安装或是升级 npm install --global @vue/cli

在命令行中输入以下命令创建 Vue 项目 vue create toutiao-m

Vue CLI v4.3.1
? Please pick a preset:
  default (babel, eslint)
> Manually select features
  • default:默认勾选 babel、eslint,回车之后直接进入装包
  • manually:自定义勾选特性配置,选择完毕之后,才会进入装包
  • 选择第 2 种:手动选择特性,支持更多自定义选项
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
  • 分别选择:
    • Babel:es6 转 es5
    • Router:路由
    • Vuex:数据容器,存储共享数据
    • CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等
    • Linter / Formatter:代码格式校验
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

是否使用 history 路由模式,这种模式兼容不好,所以这里输入 n 不使用

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

选择 CSS 预处理器,这里选择我们熟悉的 Less

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

选择校验工具,这里选择 ESLint + Standard config

? Pick additional lint features:
 (*) Lint on save
>(*) Lint and fix on commit
  • 选择在什么时机下触发代码格式校验:
    • Lint on save:每当保存文件的时候
    • Lint and fix on commit:每当执行 git commit 提交的时候 这里建议两个都选上,更严谨。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。

? Save this as a preset for future projects? (y/N) N

这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。据自己需要输入 y 或者 n,我这里输入 n 不需要。

安装结束,命令提示你项目创建成功,按照命令行的提示在终端中分别输入:

# 进入你的项目目录
cd toutiao-m

# 启动开发服务
npm run serve

目录结构

名称说明
node_modules第三方包存储目录
public静态资源,已被托管
src源代码
.gitignoregit 忽略文件,暂时不关心,我们还没有在项目中使用 git
babel.config.js先不关心
package.json包说明文件
README.md项目说明文件
package-lock.json包的版本锁定文件

src 目录结构

名称说明
assets资源目录,存储静态资源,例如图片等
components存储其它组件的目录
App.vue根组件
main.js入口文件

程序的启动

  • 找到 main.js 入口
    • 加载 Vue
    • 加载 App 组件
    • 创建 Vue 实例
    • 将 App 组件替换到入口节点

接下来,我们就不再去 html 页面中写模板了,而是一切皆组件

热重载

当使用脚手架工具 vue-cli 时,热重载是开箱即用的。

“热重载”不只是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改 .vue 文件时,该组件的所有实例将在不刷新页面的情况下被替换。它甚至保持了应用程序和被替换组件的当前状态!当你调整模版或者修改样式时,这极大地提高了开发体验。

状态保留规则

当编辑一个组件的 <template> 时,这个组件实例将就地重新渲染,并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。

当编辑一个组件的<script>时,这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为<script>可能包含带有副作用的生命周期钩子,所以将重新渲染替换为重新加载是必须的,这样做可以确保组件行为的一致性。这也意味着,如果你的组件带有全局副作用,则整个页面将会被重新加载。