这篇文章主要记录如何构建一个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标签引入就行。在每个组件中都能够使用该插件了。
以后别的坑再进行记录。