Vue-cli的使用

1. 安装命令

cnpm install -g @vue/cli

安装完了后查看版本号，有就是成功安装了

vue -V

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

  vue cerate 项目的名称

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)

> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

最好选第三个，可以自定义

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)

>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

按空格选择所需要的，初学选Babel和CSS Pre-processors
Linter/Formatter一般是与人合作写大的项目才需要

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)

> 3.x
  2.x

选vue版本，用什么选什么

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

> Sass/SCSS (with dart-sass)
  Less
  Stylus

用啥选啥

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

> In dedicated config files
  In package.json

建议选第一个，表示babel这类配置都是单独一个文件

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

yes就是保存你这次的配置，然后用在以后的项目，no就是不存

added 20 packages in 4s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project demo.
👉  Get started with the following commands:

 $ cd demo
 $ npm run serve

至此，建立了demo项目，按照提示可以跑

DONE  Compiled successfully in 5025ms                                                                          19:31:08


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.4:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

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

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

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";
// import test from "./test.vue";

Vue.config.productionTip = false;

//创建vue的实例对象
new Vue({
 //把render函数指定的组件，渲染到html页面中
 render: (h) => h(App),
 // render: (h) => h(test),
}).$mount("#app");
//vue实例的$mount()方法，作用和el:属性一样