Vue Cli2安装及配置

Vue Cli2详解

1.使用脚手架二（即vue cli2）需要安装，在安装之前需要安装node以及webpack（用于打包）：

1.1安装node：从node.js官网下载并安装node；官网地址：https://nodejs.org/en/，安装时一直点下一步就行了。安装完成后，打开命令行（win+R）,输入 node-v，出现相应版本号则安装成功。

1.2 环境变量配置：主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

（1）找到安装node的文件夹，在其中创建node_cache和node_global两个文件夹：

（2）然后若要把全局模块所在路径及缓存路径切换到上图位置，则需执行如下命令：npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"（路径为这两个文件夹的路径）

1.3环境变量：

系统变量：变量值：C:\Program Files\nodejs\node_global\node_modules

用户变量：变量值：C:\Program Files\nodejs\node_global

配置完成后，安装个module测试，执行：npm install express -g （-g是全局安装）

1.4安装webpack，在命令行执行：npm install webpack webpack-cli –g；安装完之后输入webpack -v查看版本号。

2.然后是安装vue cli2，命令：npm install --global vue-cli；安装完之后输入vue -V查看版本号，出现版本号即成功。

3.安装成功之后，就可以创建项目。

vue cli2创建项目的命令是vue init webpack 项目名称。创建完成后运行,输入：npm run dev 执行项目

其中runtime only和runtime compiler的区别如下：

Runtime only：about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere（仅运行程序: 比上面那种模式轻大约 6KB min+gzip，但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数）

Runtime Compiler：recommended for most users（运行程序+编译器:推荐给大多数用户）区别

（1）runtime-only 比 runtime-compiler 轻 6kb

（2）runtime-only 运行更快

（3）runtime-only 其实只能识别render函数，不能识别template，.vue文件中的也是被 vue-template-compiler 翻译成了render函数，所以只能在.vue里写 template

（4）两种模式生成的代码只在main.js中不同：

可以发现一个是用 template + component 而另一个则是用 render 函数

4.项目目录详解

Vue Cli2安装及配置相关推荐

vue.js安装与配置
我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
vue安装与配置、脚手架
目录一.vue.js开发前为什么要安装node.js ? vue推荐开发环境二.node.js安装与配置 1.下载安装node.js 2.配置默认安装目录和缓存日志目录 3.node.js环境配 ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) 目录一.安装Node(npm)需要的环境和版本发布信息 (1).Node版本和npm版本关系 (2).支持 ...
vue项目初学者npm如何安装与配置
npm如何安装与配置在我们初次学习或者想要启动一个前端项目的时候准会要安装nodejs和npm Nodejs的安装比较简单安装文档下载:安装教程 Npm的安装准会有许许多多的问题我在第一次安装的 ...
Vue环境搭建(node安装,环境配置,运行项目)
Vue环境搭建(node安装,环境配置,运行项目) 一.安装node 1.去官网下载node之后,推荐安装稳定版本(LTS)node官网下载地址 2.查看node安装成功否 node -v 查看nod ...
超级详细的Vue安装与配置教程
Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下 − 目录一. ...
好细的Vue安装与配置
一.下载和安装Vue 官网下载地址Download | Node.js 选择适合自己的版本,推荐LTS,长久稳定版本. 我这里选择的是Windows Installer(.msi) 64-bit 下载 ...

Vue Cli2安装及配置

Vue Cli2安装及配置相关推荐

最新文章

热门文章