用脚手架搭建vue环境

最新推荐文章于 2024-07-08 16:10:00 发布

日富一日吧

最新推荐文章于 2024-07-08 16:10:00 发布

阅读量231

点赞数

分类专栏：前端文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/qq_41194539/article/details/130931278

版权

9 篇文章 0 订阅

订阅专栏

本文详细介绍了在Windows系统中如何安装npm，设置全局路径和缓存，以及如何安装和配置cnpm。接着，文章讲解了如何安装Vue.js的命令行工具和脚手架，创建Vue项目并安装依赖，最后通过运行项目来验证配置是否成功。

摘要由CSDN通过智能技术生成

安装node.js
前往node.js官网下载并安装工具，这里安装路径选到D盘，D:\Program Files\nodejs
安装完毕在命令行输入以下命令测试是否安装成功，正确会出现版本号

npm -v

设置global和cache路径
设置路径能够把通过npm安装的模块集中在一起，便于管理。
（1）在nodejs的安装目录下，新建node_global和node_cache两个文件夹，如安装目录为“D:\Program Files\nodejs”
（2）用命令npm config set prefix "D:\nodejs\node_global"和npm config set cache "D:\Program Files\nodejs\node_cache"设置global和cache，设置成功后，后续用命令npm install -g XXX安装，模块就在D:\Program Files\nodejs\node_global\node_modules里。

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

在系统环境变量添加系统变量NODE_PATH
输入路径D:\Program Files\nodejs\node_global\node_modules ,用户环境变量里追加D:\Program Files\nodejs
注：
如果第三步不行，两个路径都配置成global
系统变量里的到nodejs安装目录的环境变量不要删除
在命令行输入以下命令试着安装express（注：“-g”这个参数意思是装到global目录下，也就是上面说设置的“D:\Program Files\nodejs\node_global”里面。）

npm install express -g

require('express')

假设成功，可以看到有输出。假设出错，检查NODE_PATH的路径。

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v

添加系统变量path的内容
上步会报错，因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。

npm/cnpm install vue -g

cnpm install vue-cli -g

vue init webpack mytest

cd命令进入mytest目录
用命令"cnpm install”安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules。
运行项目
用命令“cnpm run dev”测试该项目是否能够正常工作，用nodejs来启动。