1、安装node.js(地址:https://nodejs.org/en/download/。)根据提示点击下一步,(安装在了F盘)
删除vue-cli
npm uninstall @vue/cli -g
卸载 @vue/cli-service-global
npm uninstall @vue/cli-service-global -g
二、配置全局环境变量
1、首先在刚才nodejs的安装目录下,新建”node_global”及”node_cache”两个文件夹(后面会用到)
2、重新配置路径指向,在cmd中输入如下命令:
npm config set prefix "f:\nodejs\node_global"
npm config set cache "f:\nodejs\node_cache"
3、进行全局变量配置
打开系统对话框,“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。
进入环境变量对话框,在系统变量下新建”NODE_PATH”,输入”F:\nodejs\node_global\node_modules”。
(ps:这一步相当关键。)
用户变量”PATH”中原nodejs的路径也要重新修改为“F:\nodejs\node_global\”
4、修改node_global和node_cache 两个文件的权限,
鼠标右击node_global文件夹,在弹出的对话框中选中“安全选项卡”,在组或用户名下的方框中选中“Administrators(
DESKTOP-POJ58FS\Administrators)”,点击编辑,在弹出的对话框中选中“完全控制”点击确定。
node_cache的操作和node_global的操作完全一致.
三、安装vue-cli
npm install -g @vue/cli
检测是否安装成功
vue -V
如果提示:vue不是内部或外部命令 解决办法
在系统环境变量中path中添加
F:\nodejs\
F:\nodejs\node_modules\
四、安装支持vue.js的服务全局加载项
npm install -g @vue/cli-service-global
五、创建项目
vue init webpack new-project
提示:Command vue init requires a global addon to be installed.
Please run undefined @vue/cli-init and try again.
解决方法:npm install -g @vue/cli-init
如果无法创建项目提示:EPERM: operation not permitted, mkdir 'F:\nodejs\new-project'
解决方法:设置nodejs的文件夹权限为全局权限。
3,安装依赖
进入项目
cd new-project
安装
npm install
4,启动项目
npm run dev
这时候在浏览器中打开cmd上显示的地址就可以看到新建的页面。
http://localhost:8081
但是这个只能在本地跑,要如何在我们自己的服务器*问呢? 此时需要执行:
项目打包命令
npm run build
六、第二种创建项目
1、进入要创建项目的目录
vue create createvue
根据提示操作
2、创建好项目后,进入创建好的项目目录
cd createvue
运行项目
npm run serve
提示;
App running at:
- Local: http://localhost:8080/ ----本地浏览器浏览地址
- Network: http://192.168.1.7:8080/
3、项目打包
npm run build
7、安装模块注意事项
安装任何模块一定要全局安装,以防模块安装成功后删除npm,安装模块命令样式如下:
npm install -g 要安装的模块名称