Vue Cil配置过程

安装Node.js :

● 为了使用npm，首先需要下载Node.js安装包，下载地址可参考：

–https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi

–https://mirrors.nju.edu.cn/nodejs/latest-v16.x/node-v16.14.2-x64.msi

–https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node- v16.14.2-x64.msi

● Node.js的安装过程没有特别的注意事项，整个安装过程中都可以不必修 改任何内容，直至其自动安装完成

● 此安装包会自动配置环境变量，安装完成后，可检查npm命令是否可用， 在操作系统的命令提示符下执行以下命令即可：

● 执行以上命令后，将显示版本号，例如：

● 注意：你必须在新的命令提示符窗口（安装完Node.js后再打开的窗口） 中运行此命令:  npm -v

配置npm源 :

● nmp源（即npm仓库，称之为：registry）默认是境外服务器，在国内 使用时，访问速度较慢，通常，在初次使用时，应该将npm源更换为国内 的服务器地址，例如使用https://registry.npm.taobao.org作为npm源

● 配置npm源的命令如下：

npm config set registry

● 当配置成功后，可通过get命令可查看npm源：

npm config get registry

● 注意：无论你使用哪种操作系统，必须保证当前登录的用户具有最高访问 权限，例如，在Windows操作系统中，请使用管理员模式的命令提示符， 在Mac OS中，请使用sudo来执行以上命令。

安装Vue CLI:

● 安装Vue CLI的命令如下：

 npm install -g @vue/cli

● 以上命令中，-g表示全局安装，则当前操作系统中所有用户均可使用，且 自动配置Vue环境变量。

● 此过程将从仓库服务器中下载Vue CLI，通常耗时30秒至5分钟左右。

● 提示：如果安装过程中的日志提示更新npm版本，或提示某些软件版本偏 旧等，均可无视。

● 注意：以上操作仍需要管理权限才可以成功执行。

● 安装完成后，可通过以下命令检验Vue CLI是否安装成功： 

 vue -V

● 注意：以上命令中的-V中的V是大写的。 

● 执行以上命令后，将显示当前的Vue CLI版本号，例如：

创建工程 :

● 通常使用Vue的命令来创建Vue CLI工程，并且，此命令会将工程创建在 执行命令时的位置，所以，先在命令提示符窗口中进入Vue Workspace， 例如（以下示例中的#开头是注释，不要执行）

# 切换到D盘

d:

# 创建Vue的Workspace，文件夹名称为Vue-Workspace，是自定义名称

# 如果Vue的Workspace已经存在，则不需要执行接下来这条命令

# 如果使用IntelliJ IDEA开发VUE CLI工程，也可以直接使用IntelliJ IDEA的Workspace， 无强制要求

mkdir Vue-Workspace

# 进入D盘下的Vue-Workspace

cd Vue-Workspace

#关于cd切换文件夹

cd 文件夹名 进入文件夹

cd..  往上退一级文件夹

cd  \ 回到根级文件夹

● 当进入Vue Workspace后，就可以创建工程了

● 使用vue create命令即可创建Vue CLI工程，命令格式是：

vue create 工程名称

● 例如执行：

   vue create vue-project-01

● 输入以上指令后，按下Enter键将准备创建工程，创建过程可能耗时较长，

● 注意：不可反复按Enter键，否则会视为选择各设置选项的默认项

● 创建过程中会有一些选项，最先提示的选项是Please pick a preset，表 示“请选择一个预设项”，推荐选择Manually select features，表示 “手动选择”，通过键盘的上下箭头进行选择，选择到目标项后按下键盘 的Enter键到下一步

● 接下来的选项是Check the features needed for your project，表示 “选择你的工程中需要使用的功能”，推荐在列表中选择Babel、Router、 Vuex这3项，使用键盘的上下箭头移动，使用空格选中或取消选中，选择 完成后按下键盘的Enter键到下一步：

 

● 关于列表中主要的几个功能： – Babel：ES6高级语法向低版本语法兼容的工具 – Router：路由管理器（管理请求路径与页面资源的映射关系，相关于Controller中 @RequestMapping） – Vuex：全局状态管理工具（管理全局共享的内存中的数据，例如各页面需要使用到 的用户信息） – Linter：初学者不建议勾选，是代码规范检验工具，其要求较严格

● 接下来的选项是Choose a version of Vue.js that you want to start the project with，表示“选择你的工程中希望使用的Vue.js的版本”， 推荐选择2.x这项，选择到目标项后按下键盘的Enter键到下一步

● 接下来的选项是Use history mode for router，表示“是否在路由中选 择历史模式”，推荐选择“是”，输入Y后按下键盘的Enter键到下一步 （提示信息中，Y是大写的，表示它是默认选项，不输入Y而直接按下 Enter键是等效的）：

● 接下来的选项是Where do you prefer placing config for Babel, ESLint, etc.?，表示“你习惯把一些配置信息存放在哪里？”，推荐选择 In package.json，即存放在package.json文件中，选择到目标项后按 下键盘的Enter键到下一步：

● 最后的选项是Save this as a preset for future projects?，表示“是否 保存以上配置信息，作为后续将创建的新工程的预设？”，推荐选择 “否”，输入N后按下键盘的Enter键（提示信息中，N是大写的，表示它 是默认选项，不输入N而直接按下Enter键是等效的）：

● 至此，配置过程已经结束，接下来会自动创建工程，耗时取决于网络速度， 通常需要30秒至5分钟左右

启动服务:

● 注意：从现在开始，你可以使用IntelliJ IDEA或类似的开发工具来打开你 的项目，并使用内置的Terminal执行各个命令，使用方式与命令提示符 窗口完全相同，为保证你有足够的权限执行命令，你应该以管理员的身份 运行IntelliJ IDEA，否则，后续仍可能出现某些命令无法成功执行的问题。

● 进入工程目录，执行npm run serve命令即可启动此工程的服务（过程中 会编译打包此工程）:

npm run serve

● 当提示以下信息时，表示工程已成功启动：

● 当工程成功启动后，即可根据提示的URL在浏览器中进行访问：

停止服务: 

● 如果需要停止服务，在控制台使用Ctrl + C即可

● 提示：当按下Ctrl + C后，会提示"终止批处理操作吗(Y/N)?"，其实，当 按下Ctrl + C后，服务已经被停止，在此提示中无论选择Y或N结果都已经不重要了

重启服务: 

● Vue CLI工程启动的服务支持热部署（热更新，即：当保存对源代码的修 改后，会自动重新编译打包并覆盖原本已经启动的服务中的文件），并没 有重启服务的做法，如果在某些场景中需要实现“重启”的效果（例如修 改服务端口等），可以先停止服务，然后再次启动服务