因为自己安装nodejs创建vue项目的时候踩了很多坑,所以写这篇文章算是
记录一下
下载nodejs
在官网安装nodejs
下载选左边的那个,稳定版本,然后就一路next就行
下载完打开cmd,运行node -v 和 npm -v
修改npm默认的下载路径,在安装nodejs的路径下创建两个新的文件夹
node_cache 和 node_global
配置nodejs系统变量
-
将用户变量中的path最后的npm路径删除,然后添加上新建文件node_global的路径
-
修改系统变量,新建NODE_PATH,路径是刚刚path路径下新建的node_global,在后面加个node_modules,node_modules不用自己新建一个,使用npm下载的时候会自动新建
-
在系统变量的path下,添加node_global路径,最后要加 \ 。
系统变量就设置完了
然后使用管理员启动cmd,要使用管理员启动!!!
首先配置npm国内的淘宝镜像,为了下载更快
npm install -g cnpm --registry=https://registry.npmmirror.com
使用 cnpm -v
来测试是否下载成功。
如果下载完,cnpm -v却显示cnpm不是内部命令,参考上面配置系统变量第三步。
创建vue项目
首先安装vue
1. 对于 Vue 3,你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli
cnpm install -g @vue/cli
2. 安装完之后查看版本
vue -V
3. cnpm install vue@next(目前不知道有什么用,参考菜鸟教程上安装的,目前安装后可以正常启动创建vue项目)
安装完成后,可以在终端创建一个vue项目
vue init webpack vue3
(第一次使用这个命令会让你下载一个@vue/cli-init,按照提示下载即可)
# 这里需要进行一些配置,默认回车即可
? Project name vue3
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vue3".
# Installing project dependencies ...
# ========================
进入项目,运行安装vue项目
cd vue3
cnpm run dev
DONE Compiled successfully in 2558ms
I Your application is running here: http://localhost:8080
使用webstorm创建一个vue项目
直接点击file新建一个项目,选择vue.js,然后就会默认给你配置你电脑上的vue-cli的位置和nodejs的位置,点击 create 进行创建就创建完成了,然后按照提示,npm run serve
,即可打开vue项目