脚本宝典收集整理的这篇文章主要介绍了使用vue-cli构建vue工程，及一些小坑的记录，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

这篇文章主要记录如何构建一个vue工程，及踩到过的坑
使用vue+webpack+vue-router+vuex+axios+elementUI+jQuery+一些jQuery插件

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

@H_406_6@一、使用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标签引入就行。在每个组件中都能够使用该插件了。

以后别的坑再进行记录。

脚本宝典总结

以上是脚本宝典为你收集整理的使用vue-cli构建vue工程，及一些小坑的记录全部内容，希望文章能够帮你解决使用vue-cli构建vue工程，及一些小坑的记录所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。