(一)vue-cli 3.x 脚手架搭建项目及相关配置
1. 安装2. 创建项目2.1 使用vue-cli 3.x创建项目2.2 使用webstorm创建项目3. 项目目录
1. 安装
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过以下方式先卸载它:
npm uninstall vue-cli -g
# 或
yarn global remove vue-cli
vue-cli 3.x安装:
npm install -g @vue/cli
# 或
yarn global add @vue/cli
说明:-g / global 表示全局安装。
安装完成后可通过以下代码校验安装是否成功:
vue --version
# 或
vue -V
我使用的npm安装,安装成功后可在npm的目录下看到vue-cli的安装目录文件(\npm\node_modules@vue\cli)
2. 创建项目
2.1 使用命令行创建项目
使用 [ vue create 你的项目名称 ] 来创建项目
vue create project-name
若之前创建过项目并保存了preset,那么你可以使用之前保存的preset来创建项目:
# presetName 即你之前保存的preset文件名(完成路径)
vue create --preset <presetName> project-name
vue create 命令有一些可选项,你可以通过运行以下命令进行探索:
vue create --help
若你之前未保存过preset,或若不使用之前保存的preset创建项目,你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“Munually select features”即“手动选择特性”来选取需要的特性,如下图所示。一般会选择手动选择特性。
选择之后会出现如下界面:
- Babel —— ES6转换器
这个是解析我们es6的代码的,因为对于一些低版本的ie浏览器,还不能识别es6代码,那么vue里面好多要去写es6的代码,这个时候我们就可以用babel这个工具将es6的代码转译成浏览器能识别的代码。 - TypeScript —— 使用JS的超类语言TS
- Progressive Web App Support —— PWA单页应用
- Router —— 使用路由管理器
- Vuex —— 使用 vue 状态管理器
- CSS Pre-processors —— CSS预处理
- Linter / Formatter —— Eslint 安装
- Unit Testing —— 单元测试
- E2E Testing —— 单元测试
以上选项可根据项目需要进行选择,作为测试项目,姑且全选。
选择好后,回车,出现以下界面:
- 是否使用class风格的组件语法, 选择 yes
- 是否使用babel做转义, 选择 yes
- 是否使用路由的 history模式,选择 yes
- 选择css预处理器,请根据个人情况进行选择,这里我选择的是 Sass/SCSS < with node-sass>
- 选择 Eslint 的使用方式,我选择的 第二项
- 是否把以上的选择作为将来下个项目的模板进行保存,我选择的第一项 Lint on save.
- 单元测试,我选择使用 Jest
- 选择E2E测试解决方案,我选择使用 Nightwatch.
- 选择以上的配置文件放置的位置,一般选择第一项,单独配置。
- 是否保存以上的 preset 配置,可在将来创建项目的时候直接引用,我选择Yes.
然后需要输入preset配置保存的文件名称:
save preset as: mypreset
到此所有的配置项就选择完成了,点击回车,开始创建项目。
2.2 使用webstorm创建项目
使用webstorm创建项目,步骤如下:
- 新建vue.js项目。填写项目路径、Node.js路径、vue-cli,我此处选择vue-cli 3.x的版本
- preset 配置
- 可以使用之前的preset 配置的保存文件
- 为了演示,此处我们重新配置一遍
点击next 开始创建项目。
项目目录
项目创建成功后的项目目录如下所示:
preset配置文件
以上创建的项目本地保存的 preset,都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。你也可以使用 vue config
命令来审查或修改全局的 CLI 配置。
个人学习记录,若有不对的地方或各位有其他看法的地方,请留言指教,谢谢!
更多推荐
所有评论(0)