使用vue-cli构建vue工程,及一些小坑的记录
来源:互联网 发布:淘宝手机端网页制作 编辑:程序博客网 时间:2024/05/19 23:04
这篇文章主要记录如何构建一个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标签引入就行。在每个组件中都能够使用该插件了。
以后别的坑再进行记录。
- 使用vue-cli构建vue工程,及一些小坑的记录
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- vue-cli的使用
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue.js使用vue-cli打包遇到的坑,问题
- 关于Vue的一些小用法(记录)
- vue-cli 构建的项目中如何使用 Less
- vue-cli 构建的项目中使用 Less
- 使用VUE-CLI构建一个项目基本的配置
- 使用vue-cli构建的项目不检查分号
- vue-cli脚手架构建Vue项目及相关配置
- vue-cli构建新项目
- 机器学习资源
- 让你的程序“动”起来。
- 成为优秀Java程序员的10个要点
- HDOJ2571 DP入门题(DP+DFS)
- java图片处理工具类,很实用哦
- 使用vue-cli构建vue工程,及一些小坑的记录
- 浏览器地址栏中输入一个URL后回车,将会发生什么事情
- mongodb自动启动windows服务配置
- ZOJ 1118 N-Credible Mazes(map+并查集)
- nginx配置优化
- Servlet、Filter、Listener、Interceptor
- Spring -- 自定义转换器
- jxl简单API
- HDU