创建 vue项目的详细步骤

以vue2为例

一、 创建并初始化项目

1、vscode打开一个空文件夹，打开终端

2、终端运行：vue create 【项目名】 ##注意项目名不要用驼峰标识，可以用“-”连接

3、按上下键选择 :Marually select features

4、按上下键移动光标，按空格键选择：

5、选择2.x

6、选择路由模式

7、选择样式模式

8、

9、

10、

11、

12、

13、运行项目

14、访问路径，出现这个页面说明创建成功

二、完善项目

1、处理src中不必要文件：
删除components->HelloWorld.vue
修改router->index.js：

删除views->所有文件（About.vue和Home.vue)
修改App.vue中内容

为

2、在src文件夹中添加可能会用到的一些文件夹

3、 引入axios
添加依赖：

yarn add axios

在main.js中添加如下：

import axios from 'axios'
Vue.prototype.$http = axios

4、引入 elementUI

yarn add element-ui

在main.js中添加如下：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

配置vue.config.js（看个人而定）

关闭eslint、配置路径别名。
在vue.config.js的基础上添加如下代码：

如果 vue.config.js文件中未关闭eslint，则需要关闭命名规则

关闭命名规则

关闭命名规则 目的是解决vueeslint报错问题：
例如：Component name “index“ should always be multi-word.eslintvue/multi-word-component-names

如果在vue.config.js中已经关闭了eslint，则可以跳过这一步。

打开package.json文件，查看eslint版本，如果为 v7.20.0 以上，则需要关闭命名规则，否则忽略关闭命名规则这一步。

关闭命名规则步骤：打开.eslintrc.js文件，在rules中追加一行代码 "vue/multi-word-component-names":"off"。