Vue-vue-cli的安装

安装vue-cli

1. 安装node.js

• 下载Node.js
  Node.js地址

• 安装Node.js

  • 安装地址推荐默认C盘
  • 其他的都是默认

• 测试是否安装成功Node.js

  • 键盘win+R键 打开运行，输入cmd
  • 输入：node -v 查看版本，如果安装成功则可以查看

• 测试npm是否安装成功

  • npm -v
  • 查看版本，如果成功，就有版本号

2. 全局安装nrm（用来切换下载源）

• npm install nrm -g 安装成功之后
• nrm ls 可以查看nrm里面的内容
• nrm use taobao 更改到淘宝的镜像下载源

3. 全局安装脚手架（vue-cli)

• npm install @vue/cli -g
• vue -V 可以查看vue-cli的版本

4. 如果有yarn安装时可能会出现一些更改

• npm root view -g 查看安装根目录
• 在这里可以删除yarn等

5. 创建项目

• 选择再什么地方创建项目，在对应目录的地址栏全选，键入cmd，直接打开对应文件地址的窗口
• vue create 项目名字 创建项目
• 配置选项
  • 1、选择预设
    • Please pick a preset: (Use arrow keys) 使用键盘上下键选择 回车确定
    • default (babel, eslint) 默认只安装babel和eslint
    • Manually select features 手动选择 //重要
  • 2、手动选择插件（1,4,5,6）
    • Check the features needed for your project: 空格选择，a全选，i反选 回车确定
    • Babel 将高级版本ES转换为浏览器识别的JS语法，ES6->ES5
    • TypeScript JS的超集，提供了JS面向对象支持
    • Progressive Web App (PWA) Support PWA使应用向原生APP
    • Router 路由、请求所对应的地址
    • Vuex 数据状态管理器、用于多页面传参
    • CSS Pre-processors CSS预处理，将高级CSS语法转换为浏览器识别CSS语法
    • Linter / Formatter 代码检查工具,语法检测，严格，项目开发推荐
    • Unit Testing 单元测试
    • E2E Testing 端端测试
  • 3、选择路由模式
    • Use history mode for router? 使用history路由模式吗?
    • History模式 yes
    • Hash模式 no 路由的后方有#只刷新部分内容
  • 4、选择CSS预处理
    • Pick a CSS pre-processor
    • Sass/SCSS (with dart-sass)
    • Sass/SCSS (with node-sass)
    • Less // 选择
    • Stylus
  • 5、选择插件的配置存放位置
    • Where do you prefer placing config for Babel, ESLint, etc
    • In dedicated config files 独立的配置文件
    • In package.json 直接放在package.json中
  • 6、是否保存预设
    • Save this as a preset for future projects
    • N不保存
• 等待安装完成

进入创建好的项目文件夹

• cd/ 项目名

运行项目—不要关闭命令窗口

• npm run serve

浏览器运行—命令窗口会给出运行地址

• 如：http://localhost:8080

安装完成之后的文件说明