博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue 环境搭建(win10)
阅读量:4631 次
发布时间:2019-06-09

本文共 1019 字,大约阅读时间需要 3 分钟。

1.安装node

推荐安装稳定版本(LTS)以及安装路径为系统盘(C)
1255969-20190425174027720-1110248207.png

查看node安装成功否

注释:以下命令使用 命令提示符(管理员)权限,win10 对user权限的限制了访问权限。

node -v 查看node版本
npm -v 查看npm版本
where node 查看node安装位置
1255969-20190425174042519-1681944237.png

注意:node 版本号大于npm版本号,基于之前安装版本过低,后面会报错。

安装路径非系统盘(例D盘),出现用户目录丢失问题解决

1255969-20190425174055614-946579028.png

上图标注的文件目录可能丢失,解决办法:

主动创建目录,更新npm配置为新建目录路径,例 D:\nodejs
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

npm 运行慢,配置国内淘宝镜像包

npm config set registry https://registry.npm.taobao.org

后续包安装命令 npm 即可改为 cnpm

2.配置node环境变量

我的电脑(属性)->高级系统设置->环境变量编辑-保存

编辑path环境变量,新增node安装路径

1255969-20190425174120421-931628862.png

1255969-20190425174127175-766714564.png

增加环境变量NODE_PATH 配置的内容为node_modules 路径

1255969-20190425174145298-260038724.png

已经搭建好框架的项目直接跳转 步骤6 进行项目启动即可

3.安装VUE

npm install vue -g

-g是指安装到node_global全局目录去
1255969-20190425174207558-909626493.png

4.安装Vue-cli

运行 npm install vue-cli -g

安装vue脚手架
1255969-20190425174233109-802215471.png

5.webpack构建项目

命令行进入构建项目的路径 例:cd D:\vue-project

构建vue项目名 vue01
运行 vue init webpack vue01 构建项目并配置相关项
1255969-20190425174335389-1654150810.png

项目构建成功

1255969-20190425174354912-1014677787.png

6.项目启动

运行 npm install 下载项目依赖包

运行 npm run dev 本地启动
1255969-20190425174409398-1236842772.png

运行成功,在浏览器验证

1255969-20190425174422473-1448909152.png

浏览器验证成功,就此基本VUE目录框架搭建完成,开始模块开发了~~

7.灵活改变运行默认端口8080,避免端口冲突

1255969-20190425174434796-172447884.png

8.项目打包

运行 npm run build 进行线上打包

打包项目代码,一般默认从src目录代码压缩混淆到dist目录下。

转载于:https://www.cnblogs.com/yaohe/p/10769880.html

你可能感兴趣的文章
子查询时间比较
查看>>
缓存清理的工具类
查看>>
数组的属性、foreach遍历、交错数组与矩形数组的区别
查看>>
hihoCoder 2 * problem
查看>>
MHA高可用集群
查看>>
Swift Internal Parameter and External Parameter 外部参数和内部参数
查看>>
[LeetCode] Number of Digit One 数字1的个数
查看>>
SQL语言分类
查看>>
SublimeServer插件安装和使用
查看>>
C++——多态性实现机制
查看>>
datanode启动失败
查看>>
JAVA--线程
查看>>
常用跨浏览器事件封装
查看>>
android+onTouchEventView+背景图片
查看>>
Tomcat工作原理
查看>>
【【2014年最新web前端开发面试题目】】
查看>>
dedecms标签大全(非常经典)
查看>>
关于Thread的Runnable和Callable接口
查看>>
vue添加jquery
查看>>
ubuntu hadoop环境搭建
查看>>