vue-cli脚手架（小白教程使用）

什么是 vue-cli

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

官网上的一句话： 程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。

中文官网：https://cli.vuejs.org/zh/

安装和使用

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

终端输入 vue -V检查是否安装成功

1. 在终端下运行如下的命令，创建指定名称的项目：

   希望放在哪个目录就先在终端打开这层目录，项目名称尽量不要包含中文和空格

   vue cerate 项目的名称
   

最后一项表示手动安装哪些功能

表示在项目中安装哪些功能，

• 第一项，选择后一会让您安装vue2还是vue3
• 第二项Bable，是解决js兼容性的
• 第七项，是安装预处理器

要不然都会放到package.json文件中

y 表示将保存上面的选择，下次不必一个个的选

让你起一个名字，下次就可以不用重新一个个选择，回车之后不要乱动终端窗口(否则可能会冻结，就是暂停下载，可轻点窗口后按ctrl+c解冻)，等待下载完成

运行完后的结果，demo-first 就是你项目的名称，接下来执行下面两句命令

cd demo-first 就要你切换到项目的根目录

npm run serve 就是跑项目

打开项目的效果如上，开发时候运行 npm run serve 发布时候运行 npm run build

2. vue 项目中 src 目录的构成：

   assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
   components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
   main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
   App.vue 是项目的根组件。
   

   其他文件的意思

   .gitignore 忽略文件

   package.json 包管理配置文件 ，记录所用的包

3. vue 项目的运行流程

   在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

   其中：

   • App.vue 用来编写待渲染的模板结构
   • index.html 中需要预留一个 el 区域
   • main.js 把 App.vue 渲染到了 index.html 所预留的区域中

   main.js 文件中的配置

   // 导入 vue 这个包，得到 Vue 构造函数
   import Vue from 'vue'
   // 导入 App.vue 根组件，将来要把 App.vue 中的模板结构，渲染到 HTML 页面中
   import App from './App.vue'
   
   // 没有什么作用，为true就是会在控制台提示你处在开发模式
   Vue.config.productionTip = false
   
   // 创建 Vue 的实例对象
   new Vue({
     // 把 render 函数指定的组件，渲染到 HTML 页面中
     // render 函数中，渲染的是哪个.vue组件，那么这个组件就叫做“根组件”
     render: h => h(App)
   }).$mount('#app')
   
   // Vue 实例的 $mount() 方法，作用和 el 属性完全一样！
   

补充

如果有勾选router跟eslint可以进行如下选择

第四个 No 是因为不选 history 模式，兼容性差，且麻烦，使用 hash 模式
第六个 Standard 选择 eslint 的标准模式
第七个 Lint on save 就是在保存代码时候就会检查错误
路由的三种模式
参考资料