参考教程(推荐!!!):
IDEA中Vue的安装和使用(最全篇)
Nodejs安装及环境配置
vue3.x版本参考我的另一篇教程(超级详细!):
https://blog.csdn.net/qq_44787993/article/details/106826346
1.node.js安装成功后测试:
node -v 为查看node版本
npm -v 查看 npm 版本 ,npm(包管理和分发工具)用来来安装依赖包。
npm root -g 查看各种依赖包的默认存放路径
2.在node安装目录新建两个文件夹,node_cache和node_global
修改默认路径通过如下命令:
//修改全局变量安装位置
npm config set prefix=".\nodejs\node_global"
//修改缓存安装位置
npm config set cache =".\nodejs\node_cache"
我的安装如下:
安装后的文件夹:
3.安装npm的阿里镜像,原生npm下载依赖包过慢,镜像可以提高下载效率。
npm i -g cnpm --registry=https://registry.npm.taobao.org
4.使用cmd命令行创建Vue项目,首先创建一个项目存放的文件夹,这里我把项目放在 D:\myVue 里面,进入该目录,依次执行一下命令:
1)安装Vue的脚手架工具vue-cli,(!!!后续修正,这里要注意,使用npm - -g vue-cli安装的vue版本是2.X而现在vue已经升级到4.X了,所以想要安装vue3.X及以上版本应使用npm install -g @vue/cli,就不要后续再升级了!!!,我好恨!!!)
npm i -g vue-cli
测试是否安装成功:
vue -V //注意:-V是大写的V,不是小写的v
我的安装如下:
2)安装webpack工具
cnpm install -g webpack
我的安装:分别是开始安装和安装结束
3)基本工具安装完成后,开始创建项目
指令:vue init webpack 项目名
我的创建:
Project name ->项目名
Project description->项目描述
Author->作者
Vue build standalone->直接enter
Install vue-router->选择yes
Use Eslint to lint your code->是否将代码格式化,适合团队开发,新手不适应,我选择No
Set up unit tests->yes
Pick up a test runnner->直接Enter
Set e2e tests with Nightwatch?->yes
Should we...->yes
4)进入项目所在目录,输入cnpm run dev 运行
我的项目目录:
cmd 命令:
5)在浏览器输入:localhost:8080访问,出现一下画面则创建成功!