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

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

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查看安装是否成功

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

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

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

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

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

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

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

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

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

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

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

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

12、调用组件的方式

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

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

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

利用@include方法名（参数）;来调用

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

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

使用方法如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 图文详解vue框架安装步骤

    vue安装 首先第一步,安装javascript运行环境node.js,根据你系统是32位或64位安装文件如下图. 第二步,安装Nodejs下的包管理器,打开windows命令窗口,输入"npm install -g cnpm --registry=https://registry.npm.taobao.org"命令安装.如下图所示. 第三步,安装vue-cli脚手架构建工具,在windows命令窗口输入"cnpm install -g vue-cli",如下图所示

  • VUE 配置vue-devtools调试工具及安装方法

    1. 通过 Git 克隆项目到本地 git clone https://github.com/vuejs/vue-devtools.git 2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令. 先运行 npm install 安装项目依赖 再运行 npm run build 进行编译生成 这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图: 3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件.

  • vue调试工具vue-devtools安装及使用方法

    vue调试工具vue-devtools安装及使用方法

    本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 3.修改manifest.json文件 把"persistent":false改成true

  • Vue项目安装插件并保存

    Vue项目安装插件并保存

    比如安装jszip插件的命令行如下: npm install jszip --save-dev 只有执行了--save-dev 才会将当前安装的插件版本保存在package.json文件中 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

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

    脚手架是指通过输入简单指令帮助你快速搭建好一个基本环境的工具. vue-cli 是vue.js的脚手架,用于快速自动生成vue.js+webpack的项目模板,这样大大降低了webpack的使用难度.下面是详细的安装步骤 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1.安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定性都比较好) 2.在目标文件夹下

  • linux下安装redis图文详细步骤

    linux下安装redis图文详细步骤

    1,因为centos是个干净的环境,首先安装wget命令 2,创建个文件夹 3,下载redis,http://download.redis.io/releases/redis-5.0.5.tar.gz 4,下载后需要解压出来 5,阅读readme.md 6,执行make命令 7,make命令执行结果, 如果make执行报错如下,需要安装gcc,即yum intall gcc 安装gcc之后,需要清除下刚才的make命令执行结果, 执行命令:make distclean 然后执行继续执行make命

  • Win中安装mysql的详细步骤

    本文为大家分享了Win中安装mysql的详细步骤,供大家参考,具体内容如下 mysql下载目录 选择免安装版"Windows (x86, 64-bit), ZIP Archive" 解压后, 在mysql解压目录下创建my.ini, 内如示例如下: # 数据库服务端配置项 [mysqld] # 数据库路径 basedir=D:\\Program Files\\MySQL\\mysql-8.0.12-winx64 # 数据路径 datadir=D:\\Program Files\\MyS

  • 在windows server 2012 r2中安装mysql的详细步骤

    在windows server 2012 r2中安装mysql的详细步骤

    MySQL1.首先去MySQL的官网下载安装包 2.其他下载需要登录,选择下面的直接安装 3.然后解压到文件夹中(本文解压C:\mysql-8.0.29-winx64),并配置初始化的mi.ini文件(创建my.ini文件并把以下内容粘贴进去,记得先在解压路径下创建data文件夹哦),文件创建好后放到解压路径:C:\mysql-8.0.29-winx64 下文件内容:[mysql]设置mysql客户端默认字符集default-character-set=utf8[mysqld]设置3306端口p

  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • 从零开始安装VMwareTools的详细步骤(图文教程)

    VMware Tools是VMware虚拟机中自带的一种工具,相当于VirtualBox中的增强功能(Sun VirtualBox Guest Additions),是VMware提供的增强虚拟显卡和硬盘性能.以及同步虚拟机与主机时钟的驱动程序.它的功效不仅仅如此,我们可以通过它进行虚拟机和物理机之间的文件传输的,前提是我们要先安装它.那到底怎么安装VMware Tools呢? 一.准备工具 1.VMware Workstation Pro 2.rhel-server-6.3-x86_64-dv

  • 图文详解在Anaconda安装Pytorch的详细步骤

    图文详解在Anaconda安装Pytorch的详细步骤

    1. 打开Anaconda Prompt(在命令行格式下,输入代码,建立pytorch环境.安装pytorch.测试pytorch过程) 2. 创建环境pytorch,使用Python版本是3.8 conda create -n pytorch python=3.8 之后,在加载过程中会弹出提示,输入 y,即可安装. 3. 查看环境是否安装成功 conda info --envs 可以看到包含base和pytorch两个环境(*表示当前所在环境) 4. 进入创建的pytorch环境 conda

  • Docker-compose的安装和设定详细步骤

    Docker-compose的安装和设定详细步骤 docker的1.12版本中,swarm已经合体,docker-engine/swarm/docker-compose的三件套装已经变成两件.后续会不会将docker-compose进一步合体呢,想做的话应该是顺手的事情吧,不想做的话再简单也不会做.考虑到docker-compose可能以独立的方式消失在docker的舞台之后,先写一个安装的文档作纪念吧. 最简单的方式 下载下来二进制的docker-compose,放到你想放的地方,设定可执行的

  • MongoDB的安装方法图文教程

    MongoDB的安装方法图文教程

    什么是MongoDB ? MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成.MongoDB 文档类似于 JSON 对象.字段值可以包含其他文档,数组及文档数组. MongoDB 下载 MongoDB提供了可用于32位和64位系统的预编译二进制包,你可以从Mo

  • vue项目中使用tinymce编辑器的步骤详解

    Tinymce富文本也是一款很流行编辑器 把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import

随机推荐