vue全家桶项目搭建

一、初始化项目

1、安装vue-cli

所以先需要安装vue-cli
node -v 查看node 的版本号，有版本号则已经安装成功：

接下来，我们需要确保电脑已经安装了webpack，webpack是一个包管理工具，也是vue-cli的构建工具，安装也很简单，全局安装只需要执行

npm install webpack -g

紧接着，开始我们vue-cli的安装

npm install --global vue-cli

查看是否安装成功，我们可以通过在cmd中输入vue -V 查看，如下图出现版本号则说明安装已经完成；

2、用vue-cli来构建项目

通过 vue init webpack vue-demo 生成项目，vue-demo 是项目名称，注意名称不能有大写字母。然后和electron-vue 一样根据情况一路 enter。
然后在相应目录可看到生成的项目文件：

同样通过

npm install
npm run dev

运行项目后可以看到vue的还原页面：

3、安装Element UI

打开项目根目录下的package.json，里面是项目依赖的一些名称以及项目版本要求和一些基本配置，可以看见配置项里有 dependencies 和 devDependencies 两项，分别代表什么意思呢？当使用 webpack 构建项目时，需要明确不同环境下所需要的依赖和版本要求：

dependencies：是在生产环境下使用的一些依赖，由命令行参数 --save 或者 --save-prod 写入，缩写为 -s
devDependencies：是仅在开发环境下使用的一些依赖，不会再生产环境下使用，由命令行参数 --save-dev 写入，缩写为 -d

如果你仅仅是引入一个在开发期间需要的依赖包，你只需要把它写入在 devDependencies 中，在生产环境发布产品时，是不会加载这些包的。

安装element-ui：

npm install element-ui -s

然后在 main.js 文件中全局引入，打开 src/renderer/main.js：

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

4、vue-router的使用

1、下载vue-router

npm install vue-router --save

2、编码

1、在项目中新建文件夹 router/index.js

/*
* 路由对象模块
* */
import Vue from 'vue'
import VueRouter from 'vue-router'

/*引入pages*/
const MSite = ()=>import('../pages/MSite/MSite');
const Profile = ()=>import('../pages/Profile/pro