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 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
Javascript与flash交互通信基础教程
Aug 07 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php Calender(日历)代码分享
2014/01/03 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
10个简化PHP开发的工具
2014/12/25 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
python实现校园网自动登录的示例讲解
2018/04/22 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python求质数的3种方法
2018/09/28 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Django日志及中间件模块应用案例
2020/09/10 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
《称赞》教学反思
2016/02/17 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
Django中session进行权限管理的使用
2021/07/09 Python