利用Vue cli脚手架安装Vue

1.介绍

• .介绍-文档：https://cli.vuejs.org/zh/guide/
• .通过 @vue/cli 实现的交互式的项目脚手架
• .通过 @vue/cli +@vue/cli-service-global实现的零配置原型开发
• 运行时依赖 (@vue/cli-service )该依赖:
  1. 可升级；
  2. 基于 webpack 构建，并带有合理的默认配置；
  3. 可以通过项目内的配置文件进行配置；
  4. 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面

2、安装

1| npm install -g @vue/cli

2| npm install -g  @vue/cli-service-global

3| npm install -g @vue/cli-service

安装完之后,需要配置vue脚手架所在位置的环境变量

3.查看版本

1 | vue -V 或 vue --version

#VS Code中powershell无法运行cnpm, vue等命令
windows运行-》cmd-》输入powershell-》命令行输入：set-ExecutionPolicy RemoteSigned-》命令行输入：A-》回车-》重启VS code

4.创建项目

 #1、创建一个项目
 vue create vuecli

 #2、选择：用vue2，vue3，手动配置。 vue2，vue3除了基本语法， 还有下面2个功能
 #2.1、babel 把es6的语法，转成es5的语法，可以做到兼容
 #2.2、eslint 语法检查，约束你的代码习惯
 please pick a preset：
 Default ([Vue 2] babel, eslint)
 Default (Vue 3) ([Vue 3] babel, eslint)
 Manually select features

 #3、手动选择功能：Choose Vue version、Babel、CSS Pre-processors
Check the features needed for your project:
 Choose Vue version                  // 版本
  Babel                               // 把es6的语法，转成es5的语法，可以做到兼容
  TypeScript                          // 由微软开发的自由和开源的编程语言，是 JavaScript 的一个超集，支持es6语法
  Progressive Web App (PWA) Support   // Web APP开发
  Router                              // 路由
  Vuex                                // 状态管理器
  CSS Pre-processors                  // css预处理器：三种流行的CSS预处理器：Sass、LESS 和 Stylus
  Linter / Formatter                  // 语法检查器(eslint)
  Unit Testing                        // 单元测试
  E2E Testing                         // e2e(端到端)测试

#4、选择版本：3.x
Choose a version of Vue.js that you want to start the project with:
  2.x
  3.x

#5、选择css预处理器版本：dart-sass，官方目前主力推dart-sass
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

#6、配置文件：In package.json
Where do you prefer placing config for Babel, ESlint, etc.?
  In dedicated config files   // 独立配置文件
  In package.json             // 放在package.json里

#7、是否保持此项目配置：保存的话，起个名字
Save this as a preset for future projects?
  y   // 保存
  n   // 不保存

5. 运行项目

# npm
npm run serve
# yarn 
yarn serve

目录结构

目录名	作用
node_modules	npm 加载的项目依赖模块
public	公共资源目录
src	开发目录
src/main.js	主入口文件
src/App.vue	网站首页文件
src/assete	存放静态资源：css、js、字体、图片、资源
src/components	存放通用模块组件
src/router	存放路由设置文件
src/views
babel.config.js
package.json
package-lock.json
README.md
static	静态资源目录，如图片、字体等
dist	打包后会生成该的目录
build	项目构建(webpack)相关代码