vue脚手架安装

安装node.js
1.地址:http://nodejs.cn/download/
2.在cmd中输入node -v出现版本号
全局脚手架
vue脚手架可以快速生成vue项目基础的架构
1.安装3.x版本的脚手架:
npm install -g @vue/cli
2.基于3.x版本的脚手架创建vue项目
命令:vue create my-proiect
3.配置

勾选特性可以用空格进行勾选
1.选择预设
 Default ([Vue 2] babel, eslint)  默认只安装babel和eslint
 Default (Vue 3 Preview) ([Vue 3] babel, eslint)  
 > Manually select features      手动选择 
2.手动选择插件
 (*) Choose Vue version  选择vue版本
 >(*) Babel  语法转换器把ES6转换成ES5
 (*) TypeScript  是JavaScript 的一个超集，扩展了 JavaScript 的语法
 ( ) Progressive Web App (PWA) Support 支持渐进式网页应用程序
 (*) Router   路由管理器
 (*) Vuex    状态管理库
 (*) CSS Pre-processors   css预处理器如 scss less
 (*) Linter / Formatter  代码风格,格式校验
 ( ) Unit Testing  单元测试
 ( ) E2E Testing    端到端测试
3.选择路由模式
  Use history mode for router?   
  History模式yes
  Hash模式no路由的后方有#只刷新部分内容
4.保存时检查
  ESLint with error prevention only  仅错误预防
     ESLint + Airbnb config      Airbnb配置
     ESLint + Standard config        标准配置
     >ESLint + Prettier
     TSLint (deprecated) 
         >Lint on save 保存时检查
          Lint and fix on commit 提交时检查 
5.选择css预处理
  Pick a CSS pre-processor
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus
6.选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
  In dedicated config files 在专用的配置文件中
  In package.json 在package.json
7.是否保存预设
Save this as a preset for future projects?  No
8.在它的根目录下运行
        进入项目目录
         启动 npm run server  
            
         常用命令
         npm run lint 修复错误整理代码
         npm run build 发布编译生成上线的压缩文件

运行完成后的页面:

4.基于ui界面创建vue项目
命令:vue ui
自动打开的创建项目网页中配置项目信息
5.分析Vue脚手架生成的项目结构
node_modules:依赖包目录
public：静态资源目录
src：源码目录
src/assets:资源目录
src/components：组件目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js: