Windows安装VueJs环境
来源:互联网 发布:韩国看视频软件 编辑:程序博客网 时间:2024/05/29 07:47
1、安装node.js
node.js的官方地址为:https://nodejs.org/en/download/;然后下载对应版本,安装nodejs。
检查是否安装成功(打开):
D:\nodejs>node --version 或者 node -v
v6.11.4
D:\nodejs>npm -version 或者 npm -v
3.10.10
2.设置global和cache路径
(1)在nodejs的安装目录下,新建node_global和node_cache两个文件夹,如安装目录为“D:\nodejs\”
(2)或者用命令设置global和cache:
D:\nodejs>npm config set prefix "D:\nodejs\node_global"
D:\nodejs>npm config set cache "D:\nodejs\node_cache"
设置成功后,后续用命令npm install -g XXX安装,模块就在D:\nodejs\node_global\node_modules里。
3.设置环境变量
说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径。
(1)新增系统变量NODE_PATH:设置成“D:\nodejs\node_global\node_modules”。
(2)修改用户变量PATH:找到node.exe的路径"D:\nodejs\node.exe",把"D:\nodejs"添加加到PATH后面(用英文分号";"分隔)。
环境变量如何打开:计算机(右键) -> 属性 -> 高级系统设置 -> 环境变量
4.安装国内优秀镜像
基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/)
cmd命令行中输入:
D:\nodejs>npm install -g cnpm --registry=http://registry.npm.taobao.org
5.安装vue (安装在nodejs下面)【可以略过】;
在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
D:\nodejs>npm install vue
如果报错:
npm WARN enoent ENOENT: no such file or directory, open 'D:\nodejs\package.json'
npm WARN nodejs No description
npm WARN nodejs No repository field.
npm WARN nodejs No README data
npm WARN nodejs No license field.
解决方案:
在命令行切换到安装nodejs文件下的nodejs\node_modules\npm 后执行npm install cheerio
D:\nodejs>cd node_modules\npm
D:\nodejs\node_modules\npm>npm install vue
6. 安装vue-cli脚手架构建工具
D:\nodejs>npm install -g vue-cli
至此,我们需要的环境及工具已经准备好了。接下来,我们使用vue-cli来构建项目。
7.建一个基于 webpack 模板的新项目
首先,进入到E我们的工作目录为 E:\VueJS。此目录需先建好,目前是空的,这个工作目录以后会添加各个项目目录。
在VueJs目录下,运行命令
E:\VueJS>vue init webpack MyfirstVue
其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。
如果提示 "vue不是内部或外部命令,也不是可运行的程序或批处理文件"
解决方法:
1.在电脑内搜索vue.cmd
2.将vue.cmd的路径加入Path环境变量中,即可。如我的路径是“D:\nodejs\node_global”(用英文分号";"隔开)。
8.安装过程中,需要我们输入项目名称,描述,作者,版本(独立版),使用ESLint规范等等。
此时,我们看到工作目录下已经自动生成了目录firstVue。
主要用的包都在package.json中
cd到我们的项目文件夹firstVue中,运行命令cnpm install 安装包,(注意:我们已经使用淘宝镜像cnpm)
安装完之后,我们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源
安装完依赖包之后,就可以运行整个项目了。 运行项目在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
注: 如果卸载重装,更换安装目录后,需重新执行步骤二并修改里面配置的路径
可以借鉴:http://www.cnblogs.com/RexSheng/articles/6934413.html
Vue.js安装文档:https://cn.vuejs.org/v2/guide/installation.html
阅读全文
0 0
- Windows安装VueJs环境
- 【vueJs】windows下安装搭建vueJS开发环境
- vuejs入门--环境搭建(windows)
- Ubuntu16.04 安装 搭建vuejs开发环境
- vuejs 安装
- vuejs 安装
- vuejs安装
- vueJS搭建环境时 安装npm镜像出错解决方案
- vuejs的环境搭建
- webstorm安装vuejs插件
- vuejs cli安装
- VueJS安装到入门
- VueJS安装步骤
- VueJS(1)--安装
- vueJS入坑-环境配置
- vuejs本地环境框架搭建
- 02-vueJs开发环境搭建
- zookeeper 安装 windows环境
- Conda环境管理
- 想做AI,怎么选开发工具?这份上手指南送给你
- The ServiceClass object does not implement the required method in the following form: OMElement...
- sql server的JDBC环境搭建
- Vue 组件之间的引入
- Windows安装VueJs环境
- 715. Range Module
- MQTT协议之moquette 安装使用
- 给新入坑的程序员十条忠告
- 单链表的基本操作
- 详解nodejs中express搭建权限管理系统
- 正则表达式的贪婪匹配与懒惰匹配
- 随笔 | Nessus 更新插件
- 网站测试流程、要求及测试报告