零基础 Vue 开发环境搭建 打开运行Vue项目
2024-10-19 08:45:58
【相关推荐】IntellIJ IDEA 配置 Vue 支持 打开Vue项目
所需文件
node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0)
cnpm npm的淘宝镜像
vue-cli 构建工具(脚手架)
一、安装node
安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。
1、启动CMD依次执行以下两条命令
npm config set prefix "F:\set-soft\nodejs\node_global"
npm config set cache "F:\set-soft\nodejs\node_cache"
后续用命令npm install -g XXX安装,模块就在D:\nodejs\node_global\node_modules里。
2、设置环境变量:
(1)修改用户变量PATH:把"D:\nodejs\node_global"加到后面。
(2)新增系统变量NODE_PATH:设置成“D:\nodejs\node_global\node_modules”。
NODE_PATH = F:\set-soft\Node\nodejs
PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;
这样就可以把后面全局安装的装到global里并且可以直接用命令使用。
二、安装vue
1.安装cnpm
说明:由于许多npm包都在国外,用淘宝的镜像服务器,对依赖的module进行安装。
参考网址为:http://npm.taobao.org/
安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org
2.用cnpm安装vue
安装命令为:cnpm install vue -g
3.安装vue命令行工具
安装命令为:cnpm install vue-cli -g
三、项目开发
(1)创建工程
1. cd命令进入将要新建工程的目录,如“E:\nodejs”
2. 用命令"vue init webpack mytest"创建一个基于 webpack 模板的新项目,工程名为"mytest"。
(2)安装工程依赖 (打开别人项目第一步,)
1. cd命令进入工程目录
2. 用命令"cnpm install”安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules。
(3)运行项目
1. cd命令进入工程目录
2. 用命令“cnpm run dev”运行项目。
(4)打包项目
cnpm run build
参考文献:如何运行vue项目
最新文章
- MFC 创建多层目录
- Android test---CTS
- Linux下apache+phppgadmin安装配置
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat使用详解(转VIII)
- Python基础09 面向对象的进一步拓展
- lintcode:寻找旋转排序数组中的最小值 II
- 你的数据根本不够大,别老扯什么Hadoop了
- ALI OSS RequestTimeTooSkewed
- storm教程
- FPGA机器学习之学习的方向
- [HMLY]7.iOS MVVM+RAC 从框架到实战
- matplotlib 出图示例
- js二级事件模型的处理细节
- Volley网络框架完全解析(缓存篇)
- 设计模式学习心得<;适配器 Adapter>;
- TCP&;UDP&;Socket讲解(上)
- Python3自定义json逐层解析器
- Linux命令(一) pwd ,cd
- IIS上架设https网站证书处理备忘
- 使用NPM在项目中引入【lodash】
热门文章
- FlarumChina SQL injection Vulnerability
- [ZJOI2010]网络扩容
- 查看linux系统硬盘目录占用大小
- No module named &#39;pandas._libs.tslib&#39;
- Go语言之高级篇beego框架之配置beego环境
- python module install
- 如果你喜欢python,那你迟早会喜欢上julia的!
- django admin list_filter的使用
- git合并多个提交
- [Big Data - Kafka] Kafka设计解析(三):Kafka High Availability (下)