vue-cli环境搭建

vue-cli环境搭建

1. 安装node 下载地址

npm -v 版本号

2. 安装vue-cli

在win+r中输入cmd打开控制台
npm install -g @vue/cli 安装vue-cli
vue --version 查看版本号

3. 搭建项目

选择进入一个文件夹,地址栏输入cmd回车
vue create 项目名

上下左右是移动 空格是选中 a是全选/反选

Manually select features （手动配置）
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
(* ) Choose Vue version
(* ) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(* ) Router
(* ) Vuex
(* ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

选项	描述	选择
Choose Vue version	选择Vue版本	Y
Babel	vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5	Y
TypeScript	TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源
Progressive Web App (PWA) Support	渐进式Web应用程序（PWA）支持
Router	路由	Y
Vuex	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化	Y
CSS Pre-processors	CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。	Y
Linter / Formatter	格式化程序
Unit Testing	单元测试
E2E Testing	端到端（end-to-end）

选择版本2.x
使用history模式 Y
css预处理器选择less
选择单独生成package.json文件
是否保存当前选择为模式 n
选择使用包管理器NPM

4. 启动项目

cd # 到项目目录
npm run serve #启动项目
#打开对应链接即可