vue-cli3项目搭建

1、前言

• 之前一直使用的是vue-cli2来搭建项目，最近要搭建一个项目，发现使用vue init webpack demo无法搭建项目，去看了官网发现更新到了3.0的版本。
• 现在就介绍一下vue-cli3项目搭建的过程以及需要注意的点。
• Vue-cli3官网

2、install

• node环境

node >= 8.9 推荐：8.11.0 +
node -v // 查看node版本
npm -v  // 查看npm版本

• 这是官网的原话，意思是如果你已经安装了vue-cli (1.x or 2.x)的版本，你需要先卸载后再安装

The package name changed from vue-cli to @vue/cli. 
If you have the previous vue-cli (1.x or 2.x) package installed globally, 
you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.

• 安装

npm uninstall vue-cli -g   // 卸载旧版本
# OR
yarn global remove vue-cli

npm install -g @vue/cli  // 安装最新的版本
# OR
yarn global add @vue/cli

3、创建新项目

vue create hello-world // mac
winpty vue.cmd create hello-world  // windows环境

• 图中绿色的框中第一次是没有的，是保存的项目配置。这里选择Manually select features,选择更多配置。

  

• 按上下键来切换，按空格键来确认或者取消，图中只是作为演示。红色部分为css预处理器，选择之后如让你选择默认的css预处理器。

  

• 是否使用router的history模式，选择y,路由文件中会使用mode: 'history'

  

• 由于上面配置选择了使用css预处理器，这里提示我们选择一种默认的CSS pre-processor

  

• 由于上面配置选择了使用linter / formatter,这里选择一种ESLint，选择ESLint + Standard config标准模式。

  

• 选择什么时候执行eslint校验Lint on save

  

• 选择以什么形式配置以上所选的功能In dedicated config files

  

• 是否保存设置为一个预设模板，选择y，会让你输入个模板名Save preset as:, 下次可选择此模板快速创建项目。

  

• 目录结构如下

  

4、vue-cli2功能全覆盖

Vue CLI 3 uses the same vue binary, so it overwrites Vue CLI 2 (vue-cli). 
If you still need the legacy vue init functionality, you can install a global bridge:

npm install -g @vue/cli-init
vue init webpack my-project

这样你就可以继续使用vue-cli2来创建项目了。

5、问题描述

• 问题1：Windows和mac环境的差异

1. 首先来看官网的一段提示, 大概的意思就是如果您在Windows上使用Git Bash和minTTY，交互提示将不起作用。
2. 您必须使用winpty vue.cmd create hello-world来创建项目。
3. 如果您仍然希望使用vue create hello-world语法，您可以通过在~/.bashrc中添加别名alias vue='winpty vue.cmd'
4. 重新启动Git Bash终端会话，以导入更新后的bashrc文件。

WARNING
If you are on Windows using Git Bash with minTTY, the interactive prompts will not work. 
You must launch the command as winpty vue.cmd create hello-world. 
If you however want to still use the vue create hello-world syntax, you can alias the command by adding the following line to your ~/.bashrc file. alias vue='winpty vue.cmd'
You will need to restart your Git Bash terminal session to pull in the updated bashrc file.

• 问题2：node版本的差异

1. 如果node不是推荐的版本可能存在一些问题，如下所示：

   

   

   由于我在配置的时候选择了sass/scss作为默认的css预处理器，在通过npm安装sass/scss的时候失败了，这时候有有两种处理
2. 当sass/scss不是必须的时候，你可以选择不安装或者安装less等代替。
3. 你也可以在项目创建好后再配置sass/scss。
4. 或者变更node版本为推荐的版本。

6、未完待续