vue-cli中安装方法(图文详细步骤)


Posted in Javascript onDecember 12, 2018

脚手架是指通过输入简单指令帮助你快速搭建好一个基本环境的工具。

vue-cli 是vue.js的脚手架,用于快速自动生成vue.js+webpack的项目模板,这样大大降低了webpack的使用难度。下面是详细的安装步骤

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node

1、安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定性都比较好)

2、在目标文件夹下打开终端

3、执行cnpm install vue-cli -g 全局安装

vue-cli中安装方法(图文详细步骤)

运行vue查看安装是否成功

vue-cli中安装方法(图文详细步骤)

4、运行vue init webpack(注:模板名称)sell2(注:项目名称)

vue-cli中安装方法(图文详细步骤)

5、进入项目文件夹下执行cnpm install来安装下载到模板中的package.json中的依赖,安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件

vue-cli中安装方法(图文详细步骤)

6、由于依赖项非常的多编辑器在检索module文件时会非常的耗内存,所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件

vue-cli中安装方法(图文详细步骤)

注:webstorm一打开就卡死了,没办法操作文件夹这种情况的解决方法为,首先在文件夹形式下打开删除node-modules文件夹,然后进行阻止检索的方法,然后在重新cnpminstall就好*(这种方法需要安装完依赖项先运行一次然后删除node_modules子文件,webstorm打开项目,禁止检索node_module文件夹,然后在删除该文件夹,重新安装即可)

7、运行项目执行npm run dev  (注:此时不能用cnpm来运行,必须是npm)

8、将需要的资源放进项目

vue-cli中安装方法(图文详细步骤)

9、我们需要用到路由功能所以需要安装vue-router

安装方法:vnpm install vuve-router --save

10、在build/devs-erver.js下编写自定义变量和路由功能

vue-cli中安装方法(图文详细步骤)

这样在运行项目下就可以得到自己想要的json数据,如下:

vue-cli中安装方法(图文详细步骤)

vue-cli中安装方法(图文详细步骤)

这样路由就配置成功,并且得到了自己想要的数据

11、在写代码之前现在html文件下引入初始化样式(保持样式的统一和美观)

vue-cli中安装方法(图文详细步骤)

12、调用组件的方式

vue-cli中安装方法(图文详细步骤)

vue-cli中安装方法(图文详细步骤)

13、需要用到sass(个人需求),所以安装sass-loader

安装方法:cnpm install sass-loader --save-dev

Pakcage.json文件下回生成sass-loader的版本信息

由于sass-loader是依赖于node-sass所以我们还要安装node-sass

安装方法:cnpm install node-sass --save-dev

vue-cli中安装方法(图文详细步骤)

此时可以在模块中定义scss来书写scss代码,还可以新建*.scss文件,并且可以利用

@import“../路径”;来调用其他的scss文件和已经定义好的scss方法,

利用@include方法名(参数);来调用

vue-cli中安装方法(图文详细步骤)

vue-cli中安装方法(图文详细步骤)

14、需要用到ajax请求,利用vue-resource

安装方法:cnpm install vue-resource--save 安装完成会在package.json中生成版本信息

使用方法如下:

vue-cli中安装方法(图文详细步骤)

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

Javascript 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
js中this用法实例详解
May 05 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
新版小程序登录授权的方法
Dec 12 #Javascript
加快Vue项目的开发速度的方法
Dec 12 #Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 #Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 #Javascript
d3绘制基本的柱形图的实现代码
Dec 12 #Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 #Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
destoon数据库表说明汇总
2014/07/15 PHP
PHP多文件上传类实例
2015/03/07 PHP
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Python中删除文件的程序代码
2011/03/13 Python
python标准日志模块logging的使用方法
2013/11/01 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
django query模块
2019/04/20 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
暑期社会实践学生的自我评价
2014/01/09 职场文书
自我鉴定三原则
2014/01/13 职场文书
上课睡觉检讨书
2014/01/28 职场文书
西式结婚主持词
2014/03/14 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
学校节水倡议书
2015/04/29 职场文书
单位考核鉴定意见
2015/06/05 职场文书
谢师宴学生致辞
2015/07/27 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android