使用vue脚手架创建一个项目(一)

使用vue脚手架创建一个项目

    • 第一步:是否安装Vue CLI 的包
    • 第二步:检查版本是否正确或者是否安装成功
    • 第三步:创建一个项目
    • 第四步:预设置项目
      • 1.选择vue的版本2.x或者3.x
      • 2.选择代码校验
    • 第五步:启动项目
      • 1.启动报错
      • 2.报错
      • 3.启动成功

第一步:是否安装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

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

vue --version

第三步:创建一个项目

vue create 项目名称

第四步:预设置项目

你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性,按住“上下键”进行切换选择,按住Enter键进行选中
使用vue脚手架创建一个项目(一)_第1张图片

 (*) 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

使用vue脚手架创建一个项目(一)_第2张图片

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

使用vue脚手架创建一个项目(一)_第3张图片
这里我继续使用2.x

2.选择代码校验

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

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

第五步:启动项目

npm run serve

1.启动报错

使用vue脚手架创建一个项目(一)_第4张图片
找到package.json,删除@vue/prettier,重新运行npm run serve

2.报错

使用vue脚手架创建一个项目(一)_第5张图片
按照提示运行

npm install --save vue vue-router vuex

3.启动成功

使用vue脚手架创建一个项目(一)_第6张图片

你可能感兴趣的:(vue,javascript,单元测试,vue.js)