node，Vue的安装，和项目的创建

2022-01-21 09:30:48 阅读：231 来源： 互联网

标签：node npm Vue cli nodejs 创建 global vue

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 要安装的模块名称

标签：node,npm,Vue,cli,nodejs,创建,global,vue
来源： https://blog.csdn.net/xiequanshuai/article/details/122614492

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

node，Vue的安装，和项目的创建