文章目录
- 前言
- 一、Node.js的下载与安装
- 二、Node.js环境变量配置
- 2.1、创建默认安装目录和缓存日志目录
- 2.2、创建完两个文件夹后，在cmd窗口中输入以下命令（两个路径即是两个文件夹的路径）：
- 2.3、设置电脑环境变量
- 三、安装vue及脚手架
- 3.1、安装vue.js
- 3.2、安装webpack模板
- 3.3、安装脚手架vue-cli 2.x
- 3.4、vue-cli2创建运行vue项目
- 3.4.1、创建项目
- 3.4.2、运行项目
- 四、安装vue-cli 3.x
- 4.1、卸载旧版本
- 4.2、安装新版本
- 4.3、新建项目
- 4.4、运行项目
- 4.5、cli3下拉取2.x模板
前言
Vue前端框架的环境搭建
一、Node.js的下载与安装
- 官方下载地址：官方链接
- 这里下载的是 64位window系统 的安装文件
node-v18.16.1-x64.msi：教程链接
安装完之后，使用 window + R快捷键，启动 cmd命令行，验证 Node.js 是否安装成功
需要注意:我们在cmd中的操作都是需要管理员权限的
以管理员身份打开方式如下：
出现此面板后，直接 按住Shift + Ctrl + Enter，就会弹出是否以管理员身份打开终端的确认弹窗，点击按钮是，就可以了
出现以下情况，即表示安装成功
二、Node.js环境变量配置
- 在上面我们已经完成了
Node.js的安装，即使不进行此步骤的环境变量配置也不影响Node.js的使用- 但是，若不进行环境变量配置，那么在使用命令安装
Node.js全局模块（如：npm install -g vue）时，会默认安装到C盘的路径 (C:\Users\用户名\AppData\Roaming\npm) 中- 因此，我们需要配置 全局安装模块
node_global以及 缓存目录node_cache的环境变量；
2.1、创建默认安装目录和缓存日志目录
比如，我希望将全模块所在路径和缓存路径，放在我
Node.js安装的文件夹中，则在我安装的文件夹【F:\coding\NodeJs】下创建两个文件夹【node_global】及【node_cache】分别用来存放安装的全局模块和全局缓存信息。
2.2、创建完两个文件夹后，在cmd窗口中输入以下命令（两个路径即是两个文件夹的路径）：
// 设置全局模块安装路径
npm config set prefix "F:\coding\NodeJs\node_global"
// 设置全局缓存存放路径
npm config set cache "F:\coding\NodeJs\node_cache"
命令执行后，效果如图：
查看命令有以下：
// 查看npm全局安装包保存路径
npm config get prefix
// 查看npm装包缓存路径
npm config get cache
// 查看全局安装目录
npm list -global
// 查看所有npm 配置
npm config list
2.3、设置电脑环境变量
环境变量界面打开顺序：
右键 “我的电脑”=》属性=》高级系统设置=》环境变量，进入环境变量对话框
1、在【系统变量】中新建环境变量 NODE_PATH，变量值为：F:\coding\NodeJs\node_global\node_modules，其中 F:\coding\NodeJs\node_global 是新创建的全局模块安装路径
2、在【系统变量】下的【Path】中添加上Node的路径【F:\coding\NodeJs\】
3、修改【用户变量】中的 【Path】 变量，将 C:\Users\用户名\AppData\Roaming\npm 修改为F:\coding\NodeJs\node_global
4、设置完用户变量后，一路点击确定，我们的电脑环境变量就完成了
注意：配置完，一定要重启，否则不生效
三、安装vue及脚手架
3.1、安装vue.js
在 cmd 窗口中输入以下指令 全局安装Vue模块
// -g 表示全局安装
npm install vue -g
执行效果，如图所示：
查看安装的vue信息：npm info vue
查看安装的vue版本 npm list vue
3.2、安装webpack模板
在cmd中运行命令
npm install webpack -g，然后等待安装完成。
webpack 4x 以上，webpack将命令相关的内容都放到了 webpack-cli，
所以还需要安装 webpack-cli：npm install --global webpack-cli，
安装成功后可使用webpack -v查看版本号。
3.3、安装脚手架vue-cli 2.x
在cmd窗口中输入命令：npm install vue-cli -g，执行效果如下：
可以用以下命令来检查其版本是否正确：
vue -V
vue --version
执行效果，如图所示：
这里再安装上Vue路由：vue-router
在cmd窗口中输入命令：npm install -g vue-router
可以看到现在我的安装目录如下：
3.4、vue-cli2创建运行vue项目
3.4.1、创建项目
在想要创建的位置路径下打开cmd（直接点击路径输入cmd即可打开当前位置的终端）
输入命令：vue init webpack 项目名（初始化一个完整版的项目），执行效果如图
注意：项目名不要取中文和大写字母。
配置详解：
- Project name（项目名称）：回车
- Project description（项目描述）：回车
- Author（作者名）：回车
- Vue build ==> （是否安装编译器）runtime-compiler、 runtime-only 都是打包方式，第二个效率更高；
- Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到路由，所以Y 回车；
- Use ESLint to lint your code ==> 是否需要ESLint检测代码，目前我们不需要所以 n 回车；
- Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
- Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车；
- Should we run
npm installfor you after the project has been created? (recommended) ==> 安装依赖npm install
最后结果如下，项目初始化成功
3.4.2、运行项目
按提示代码进入到项目目录下并运行 npm run dev，如图所示
按提示打开地址 http://localhost:8080， 打开网址如图所示
结束项目运行：Ctrl + C，选择 Y 即可停止项目的运行。
四、安装vue-cli 3.x
4.1、卸载旧版本
卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g
4.2、安装新版本
默认安装的话是安装最新的版本：npm install @vue/cli –g
4.3、新建项目
4.3.1、输入命令：vue create 项目名，进入详细选择
因为默认 vue2 版本和默认 vue3 版本都是有 Eslint 和 Babel 的，Eslint 是代码规范的，Babel 是将 ES6 转化为 ES5 的。
所以新手不建议安装有 Eslint 的，所以选择自主配置 – 最后一种
(上下 方向键选择,空格键确定, Enter进入下一步)
（按空格键来进行是否选择，一般建议以上已勾选的选择）
Babel：es6 转 es5
Router：路由
Vuex：数据容器，存储共享数据
CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
Linter / Formatter：代码格式校验（一般情况下默认勾选了，记得取消！）
4.3.2、选择vue版本
4.3.3、是否选择history路由模式，（这里选择“N”）
4.3.4、选择css预处理器，一般选择Less
4.3.5、Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：
In dedicated config files：分别保存到单独的配置文件
In package.json：保存到 package.json 文件中
这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。
4.3.6、是否将刚才的选择保存起来，下次可以直接用，一般选择N，可以根据自己需要选择
4.4、运行项目
cd 到我们的项目目录， 然后输入 npm run serve可以运行我们的项目
按提示打开 http://localhost:8080 就可以看到我们的运行的结果了，如图
4.5、cli3下拉取2.x模板
输入命令：npm install -g @vue/cli-init，执行效果如图
依然可以新建2.x的项目 vue init webpack 项目名
