其他分享
首页 > 其他分享> > 创建 vue项目的详细步骤

创建 vue项目的详细步骤

作者：互联网

以vue2为例

一、 创建并初始化项目

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

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

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

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

5、选择2.x
image

6、选择路由模式
image

7、选择样式模式
image

8、
image

9、
image

10、
image

11、
image

12、
image

13、运行项目
image

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

二、完善项目

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

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

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

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的基础上添加如下代码：
image
如果 vue.config.js文件中未关闭eslint，则需要关闭命名规则

关闭命名规则

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

如果在vue.config.js中已经关闭了eslint，则可以跳过这一步。
image
打开package.json文件，查看eslint版本，如果为 v7.20.0 以上，则需要关闭命名规则，否则忽略关闭命名规则这一步。
image
image

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

image

标签：axios,步骤,js,vue,eslint,关闭,创建,config
来源： https://www.cnblogs.com/huangchun/p/16661356.html