使用vue脚手架创建一个项目(一)_vue脚手架教师管理系统

第一步:是否安装Vue CLI 的包

按住wins+r,打开命令行，输入下面命令
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它

npm install -g @vue/cli
1

第二步：检查版本是否正确或者是否安装成功

vue --version
1

第三步：创建一个项目

vue create 项目名称
1

第四步：预设置项目

你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性，按住“上下键”进行切换选择，按住Enter键进行选中

 (*) Choose Vue version--》选择Vue版本
 (*) Babel--》Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本（可以帮我们将 高级的语法转换为 低级的语法）
 ( ) TypeScript--》typescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法；typescript 在编译期会去掉类型和特有语法，生成纯粹的JavaScript；慎重选择，一种开发语言，不懂的千万不要选
 ( ) Progressive Web App (PWA) Support-->渐进式Web应用程序(PWA)支持
 (*) Router--> 路由
 (*) Vuex--> 状态管理器
 (*) CSS Pre-processors--》CSS 预处理器：一种具有编程逻辑的CSS语言。允许使用类似变量、函数、继承、运算符等编程方法来编写CSS文件，如果用less，sess等，可以选
 (*) Linter / Formatter--->代码校验
 ( ) Unit Testing--->单元测试
 ( ) E2E Testing
1
2
3
4
5
6
7
8
9
10

1.选择vue的版本2.x或者3.x

这里我继续使用2.x

2.选择代码校验

 ESLint with error prevention only--》只有错误预防的ESLint
  ESLint + Airbnb config--》
  ESLint + Standard config--》ESLint +标准配置
  ESLint + Prettier--》严格校验，统一前端代码风格
1
2
3
4

如果下面不知道，可以按enter回车，就可以了

第五步：启动项目

npm run serve
1

1.启动报错

找到package.json，删除@vue/prettier,重新运行npm run serve

2.报错

按照提示运行

npm install --save vue vue-router vuex
1

3.启动成功