使用vue-cli构建vue工程，及一些小坑的记录

这篇文章主要记录如何构建一个vue工程，及踩到过的坑

使用vue+webpack+vue-router+vuex+axios+elementUI+jQuery+一些jQuery插件

所有的代码都在github上有https://github.com/EaVanCN/vue-web-portal，这是一个门户网站的前端demo,使用假数据填充页面，持续更新中。

一、使用vue-cli创建一个vue的工程

涉及到的命令包括：

$ npm install -g vue-cli //1
$ vue init webpack vue-project //2
$ cd vue-project //3
$ npm install //4
$ npm run dev //5

1、本文使用vue-cli是通过npm来下载的，所以首先要有一个node的环境，在安装完node之后，npm就会自动安装在你的电脑中了，然后打开控制台，输入npm install -g vue-cli 全局安装vue-cli。

2、在安装完vue-cli之后，你就能够在控制台使用vue命令了，进入到想创建工程的文件夹中，输入vue init webpack-simple vue-project，会让你工程名称，描述，作者等信息，然后就会创建一个叫做vue-project的工程。

此时你会得到一个如下的目录结构。



4、Package.json中有该工程所依赖的各种包，运行npm install，会自动安装这些包。

5、最后运行npm run dev，会在你本地localhost:8080启动一个服务，你能打开浏览器访问它。

二、组件的使用

我们想对路由控制，会使用到vue-router，统一管理状态，会使用到vuex，想对页面上一些功能进行复用，也会写一些自己的组件，如何在我们的工程中使用这些组件呢？

例如使用vue-router，首先要在工程中引入vue-router,使用命令npm install vue-router --save-dev ,会从npm中下载最新版本的vue-router，并将相关信息保存在package.json中。

然后再在main.js中引入vue-router :

import VueRouter from 'Vue-router'
Vue.use(VueRouter);

这样就能使用vue-router了。

也并不是所有能从npm上下载下来的组件都能使用Vue.use()，比如axios就不行，当你使用import axios from 'axios'引入axios后，他并不能使用Vue.use(axios)来将它引入工程，对于axios来说，使用Vue.prototype.$http = axios 就可以在其他页面直接this.$http使用axios的时候。

对于自己写的后缀为.vue的组件，需要vue-loader支持，在引入vue-loader之后，就能使用自己写的组件了，vue组件的使用方法，vue官网中有相关介绍。

三、element-UI的使用

element-UI也像vue-router一样，下载之后import进工程，但同时还要import 'element-ui/lib/theme-default/index.css'，使用到css文件，就要使用到css-loader和style-loader。

除此之外，element-UI中还要使用file-loader解析.woff的图标，故需要下载这几个loader，并且在webpack.config.js中配置。

{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},

然后就能使用element-UI了。

四、Vue引入jQuery及使用依赖jQuery的插件

使用vue这种mvvm的框架，对页面的dom操作就没有以前那么关系了，jquery也就使的少了。没用vue之前有很多使得顺手的插件，在npm上可能并没有，而且依赖jQuery,这时候就要把jQuery引到工程中来了，JQuery引到工程中来并不难，但发现并不是能在每个组件中直接使用$这个方法，也就不太好处理别的插件和jQuery的依赖关系。

这时候，可以创建一个jquery-vendor.js文件，里面内容为：

import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $

然后再在main.js中import该文件import $ from '/jquery-vendor.js'，这样就可以全局使用$了。将这个import放在上面，也就能够处理插件与jQuery的依赖了。例如我使用了SuperSlider，直接将它的js放在assist/js中，然后再在inedx.html中使用script标签引入就行。在每个组件中都能够使用该插件了。

以后别的坑再进行记录。