vue2大体项目构建

（创建文件夹就大可不必说了吧，然后win+r， cmd应该都会是吧）

1.cnpm init -y (初始化项目)

2.cnpm i -D @vue/cli@4.5.15 (安装脚手架)

3.npx create vue Project-one (创建项目，Project-one随你命名哦~)

4.接着根据cmd命令面板进行项目运行得预览操作

5.在vs里面创建vue.config.js进行一定得项目配置,能够保证自动展示

module.exports={

devServer:{

open:true

}

}

6.cnpm i element-ui -S（进行elementUI得安装）

(1.)全局使用ElementUi（在main.js里面进行写入）

import ElementUi from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUi)

(2.)按需引入ElementUi插件

cnpm i babel-plugin-component -D

然后在Babel.config进行配置

"plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]

然后创建一个单独得Plugins来进行封装数据，进行按需导入

（此处是为了能够组件封装，不用动丢到main.js里面形成代码杂乱）

import Vue from "vue";

import {Button} from 'element-ui'

Vue.use(Button)

7.进行Sass样式框架得安装

cnpm i sass-loader@7 node-sass@4 -S

8.可以适当添加一些样式重置得文件（别问直接上网址，此处可加可不加，一些基础样式得变化）

CSS Tools: Reset CSS

9.进行一定图标库得下载

cnpm i -D font-awesome

10.进行anxios安装

cnpm i axios -S

然后在main.js中进行使用

import axios from 'axios'

Vue.prototype.axios = axios

11.路由得安装

cnpm i vue-router@3.5.3 -S

并且创建Route文件夹进行封装

import Vue from "vue";

import Router from 'vue-router';

import Home from '../components/Home.vue';

Vue.use(Router)

export default new Router({

routes:[

{

path:'/',

component:resolve=>require(['@/components/Home'],resolve)

}

],

mode:'history'

})

然后在main.js里面进行配置

import router from './router';

并且在new vue中进行router得导入，

最后找一个界面如app.vue写上router-view配置一个路由出口。

齐活，那么你就拥有了一个框架配置好的vue了，大胆操作吧！！！