四、配置好 vscode的插件

Vue 2 Snippets 插件 补全Vue2 格式的代码

vetur 插件 是vue的代码高亮 描述:vetur插件的网址:http://t.zoukankan.com/snowhite-p-7656875.html

Prettier-Standard - JavaScript formatter插件 让代码规范化 官网:https://www.prettier.cn/

Prettier ESLint插件 让代码按照ESLint的规范规格式化代码

五、下载@vue/cli 脚手架

目前 @vue/cli 脚手架的最新版为 version 5

npm install @vue/cli -g

预备工作:先把cmd权限更改为 默认是管理员权限

window+r 键 输入 secpol.msc

点击左边的 “本地策略” --- 再点击右边的 “安全选项” --- 找到 “用户账号控制: 以管理员批准模式运行所有管理员” 点击 并选择 “已禁用” 然后 点击确定 ----- 重启电脑 这样之后启动cmd就是 管理员权限启动的

终端窗口创建vue2.x 项目

首先创建一个新的空文件 vue2Project

mkdir vue2Project

创建 vue2.x 项目

vue create 项目名

注意:项目名,不建议使用中文,如果是多个单词拼接 建议使用 驼峰写法

步骤一:新建一个空文件夹

前端工作前准备的开发环境三_CSS

步骤二:在新建的空文件夹中打开cmd终端

然后输入 cmd

前端工作前准备的开发环境三_语法错误_02

步骤三: 在终端中输入 vue create 项目名 创建项目

输入 vue create 项目名字

例:vue create demo

前端工作前准备的开发环境三_CSS_03

步骤四:选择自定义模板 Manuall select features

前端工作前准备的开发环境三_Babel_04

步骤五:选择自己需要的插件

  • Babel 包含ES5、6、7、8..... 以后的新语法 并且在打包时 降级为 es5
  • TypeScript JS增强版的语法,并且解析 TS语法的插件

PWA 支持离线模式操作部分功能 暂时用不到,后期可以用其他的代替

  • router路由插件 实现单页面跳转的插件

vuex-store插件 是vue的一个状态管理公共仓 也是内存插件

  • CSS Pre-processors插件 是CSS预处理器插件 支持less、sass 转 css语法
  • Linter/Formatter插件 是检测代码规范的插件
  • Unit Testing插件 做单元测试的插件
  • E2E Testing插件 黑盒测试的插件

前端工作前准备的开发环境三_CSS_05

选择:Babel 、router、CSS Pre-processors、Linter/Formatter

注意:选择好了以后,直接按 "回车键" 进行下一步

步骤六:选择使用 2.x 的 vue.js

前端工作前准备的开发环境三_CSS_06

步骤七:router路由 不使用 history mode(历史模式)

输入n 敲回车

前端工作前准备的开发环境三_语法错误_07

步骤八:CSS解析插件, 选择使用less 语法

前端工作前准备的开发环境三_语法错误_08

步骤九:ESLint对代码质量的标准 推荐选择 ESLint + Standard config 或者 ESLint + Prettier

前端工作前准备的开发环境三_语法错误_09

步骤十: 设置 ESLint 检查代码的时机

选择 Lint on save 保存的时候 触发 ESLint检查

前端工作前准备的开发环境三_语法错误_10

lint on save 代码文件中有代码不符合 lint 规则时,会在 compile 阶段提示 warning。如果出现了语法错误,会直接在页面上显示 error

lint and fix on commit 代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候,通过 githook,在 pre-commit 阶段执行 lint 和 fix 操作,自动帮我们把有语法错误的地方修改为符合规范。

步骤十一:将插件的配置保存在各自的配置文件中

选择:In dedicated config files

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

前端工作前准备的开发环境三_CSS_11

步骤十二:不保存此次配置的项目模板

选择:n

前端工作前准备的开发环境三_语法错误_12

步骤十三:选择使用yarn来下载依赖,如果没有yarn会自动跳过这一选项

启动项目:

第一步: cd mode

第二步:yarn serve