Vue脚手架安装教程

Vue脚手架

安装vue脚手架之前，建议先去看看webpack的安装过程，这样会更好理解一些。

1.安装一个3.x版本的Vue脚手架

npm install -g @vue/cli
//npm i -g @vue/cli

2.创建项目

//protest是项目名，自定义的
vue create protest

这里会有选项出来，可以选第一项，但是建议选第三项，自定义（高手就选这个），选择特性以创建的项目为准

使用键盘上下键移动，回车选定，勾选特性用空格进行勾选

选了第三项之后，接下来出现的页面：

选择Router

接下来，选择2.x，回车：

接下来，是否选用历史模式的路由，输入n或者y，看个人情况即可，回车：

接下来，ESLint选择选择第三项，回车：

接下来，何时进行ESLint语法效验，选第一项，回车：

接下来，babel,protcss等配置文件如何放置，选默认的第一项：单独使用文件进行配置，回车：

最后，是否保存为模板，以后创建项目的模板。看个人n和y都可以：

整个模板：

加载完成后出现的页面：

输入cd 建的项目名称

执行npm run serve后出现的页面：

Local和Network的两个地址（服务器的地址）都可以直接点开页面

到这里，项目创建完成

3.基于ui界面创建Vue项目

执行一下命令，可以打开ui界面

vue ui

安装Element-UI

Element-UI:是一套2.0的桌面组件库

1.在终端输入：

npm install element-ui -S

2.在入口文件(src/main.js)导入添加：

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

额外的步骤：

因为代码格式的原因，所以需要以下的步骤
1.关掉插件

2.在根目录下添加一个文件

3.在cscode里面添加一个插件
3.1

3.2
在.vue文件中右键-选择下面的

3.3

4.在根目录下的.eslintrc.js的文件中添加一个语句

设置端口

在项目根目录下创建以下的js文件

内容如下