vue.js从安装到搭建过程详解


Posted in Javascript onMarch 17, 2017

最初的时候用vue是直接下载相关文件 按照以前的方法来操作的

后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程:

安装

1、 安装nodejs

直接网上找下载就好

2、安装淘宝镜像

打开命令行 输入

npm install -g cnpm --registry= https://registry.npm.taobao.org

3、安装webpack

cnpm install webpack -g

4、在你想要新建项目的路径下新建文件夹 用于存放项目文件

cd 进入你的文件路径

vue init webpack-simple 工程名字(名字不能用中文)

后面会有一些默认的设置

Target directory exists. Continue? (Y/n) 直接回车默认
  Project name (vue-test) 直接回车默认
  Project description (A Vue.js project) 直接回车默认
  Author 写你自己的名字

5、完成以后 就会发现 你的文件夹里已经有了所需的文件

vue.js从安装到搭建过程详解

6、安装npm 项目依赖 这一步会比较慢 因为文件很多

npm install

7、运行你的项目

npm run dev

到这里 你的基本安装以及搭建就算是完成了

下面就写一些我在项目里遇到的一些需要文件的引入

1、jQuery的导入

之前在和别人讨论的时候 他说vue不需要用jQuery 但是我们项目那边说要安装 所以我就安装了-_-
首先是命令行安装

npm install jquery --save

加入- -save 的意思就是保留到本地
然后再webpack.config.js 中
module.exports.plugins =中加入

new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery'
 })

还有再要引用的js中加入

import $ from 'jquery'
window.$=$

这样 jQuery就成功导入项目中了

2、静态css以及js导入

静态css 导入就是在相应的.vue文件中import
例如

@import './assets/css/global.css';

静态js在相应的js中require 还有这些js以及css要放在assets下面

require('./assets/js/global.js')

3、vue-resource 导入
还有elementui导入方法都是一样 这里就医vue-resource为例

npm install vue-resource --save

之后在需要导入的js中import还有use

import VueResource from 'vue-resource'
Vue.use(VueResource)

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
js 字符串操作函数
Jul 25 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
超简单的Vue.js环境搭建教程
Mar 17 #Javascript
Vue.js开发环境快速搭建教程
Mar 17 #Javascript
原生js编写2048小游戏
Mar 17 #Javascript
vue.js开发环境安装教程
Mar 17 #Javascript
jquery 手势密码插件
Mar 17 #Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 #Javascript
AngularJS路由切换实现方法分析
Mar 17 #Javascript
You might like
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php简单获取复选框值的方法
2016/05/11 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
JS制作简易计算器的实例代码
2020/07/04 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python 获取et和excel的版本号
2009/04/09 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
python实现发送邮件及附件功能
2021/03/02 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
新护士岗前培训制度
2014/02/02 职场文书
2014年物流工作总结
2014/11/25 职场文书
2014年建筑工作总结
2014/11/26 职场文书
八一建军节慰问信
2015/02/14 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年防汛工作总结
2015/05/15 职场文书
围城读书笔记
2015/06/26 职场文书
消费者投诉书范文
2015/07/02 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
python ConfigParser库的使用及遇到的坑
2022/02/12 Python