Vue项目的创建

1.检验是否下载成功Node.js

运行node -v和npm -v出现版本号

2.全局安装@vue/cli

npm install -g @vue/cli

3.检查是否安装成功

vue-version

4.进入想要创建项目的文件夹cmd打开命令行

vue create practice

5.配置项目

（在这里我选择的是vue2）

6.运行项目

 按照提示先执行cd practice进入刚刚创建好的文件夹

 进入文件夹后输入npm run serve 启动项目

 出现这个页面就启动成功啦！！！

（默认的是8080端口，我的8080端口被占用了，所以启动就启动了8081端口）

接下来，我要安装一下项目要用的相关依赖包！

这个项目使用vue-cli + element-ui+ less +vue-router开发

1.安装element-ui

npm i element-ui -S

2.安装less-loader

npm install --save less

npm install less-loader@5.0.0 --save

3.安装Vue-router

npm  install  vue-router@3.5.3

下载好相关依赖后，打开vscode配置文件

1.配置main.js

import Vue from 'vue'
import App from './App.vue'
// 引入less
import less from 'less'
Vue.use(less)
// 引入Element-Ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 引入路由文件
import router from '@/router/index.js';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router  // router 挂载到根实例对象上
}).$mount('#app')

2.在src目录下创建router文件夹，该文件夹下新建index.js用于编写路由配置

流程大概就是这样的了