# [vue-cli4.5创建vue项目](https://www.cnblogs.com/gujun1998/p/13659430.html) ### 1. 准备工作 #### 1.1 安装node.js 安装过程很简单，在官网下载安装包，点击安装，一直下一步直到安装完成即可，新版本的node.js会自动添加环境变量，不需要再手动添加环境变量，如有疑问，可自行前往环境变量查看。 node.js官网：https://nodejs.org/zh-cn/ 出现下图所示表示node安装完成。  #### 1.2 检查安装的node.js是否成功及其版本号 进入cmd（Windows+R进入运行界面，输入cmd回车即可）窗口，在cmd窗口中输入命令： ``` node -v ``` 若出现node.js的版本号，则表示node.js安装成功。如下图所示  #### 1.3 检查npm版本，并修改镜像为淘宝镜像 安装node后会自动安装npm，可以通过命令查看npm的版本号 ``` npm -v ``` 若出现npm的版本号，即表示npm已经安装成功，如下图所示  在命令行输入如下命令，配置npm镜像为淘宝镜像 ``` npm config set registry https://registry.npm.taobao.org ``` 设置之后可通过如下命令查看是否成功配置为淘宝镜像 ``` npm config get registry ``` 若出现淘宝镜像的URL路径则表示配置淘宝镜像成功，如下图所示  当然，也可以安装cnpm，通过cnpm来执行npm命令，安装cnpm命令如下 ``` npm install -g cnpm --registry=https://registry.npm.taobao.org //--registry=https://registry.npm.taobao.org 为淘宝的镜像地址，下载过慢时可以添加此地址 cnpm -v //查看cnpm是否安装成功及其版本号，若出现版本号则表示安装成功。 ``` 出现如下图所示，表示环境准备工作完成  ### 2. 安装vue-cli4.5 因为vue-cli4.5和之前的3.0以下的老版本不一样，安装命令也有所不同。 ``` npm install -g @vue/cli //全局安装vue-cli最新版本 ``` 安装过程中若下载过慢，可以使用cnpm进行安装，或采取上述方式，在命令后加上淘宝镜像地址 安装之后查看vue-cli是否安装成功及其版本号 ``` vue -V //注意，此时需要使用大写的-V，小写的-v ``` 出现下图所示表示vue脚手架（vue-cli4.5）安装成功  ### 3. 创建vue项目 #### 3.1 进入创建项目目录 根据自己的需要进入想要创建vue项目的目录，然后通过cmd窗口执行命令 （可通过在目录窗口上方的路径地址栏中输入cmd进入当前目录，也可以从c盘逐步进入当前目录） ``` vue create test001 //创建项目，test001位项目名，项目名中不允许出现大写字母 ``` #### 3.2 选择自定义配置 通过键盘中的向下箭头控制，选择 Manually select features 手动配置 如下图所示。  手动配置选项解释 | 序号 | 选项 | 描述 | 选择 | | ---- | --------------------------------- | ------------------------------------------------------------ | ---- | | 1 | Choose Vue version | 选择Vue版本 | Y | | 2 | Babel | vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5 | Y | | 3 | TypeScript | TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源 | | | 4 | Progressive Web App (PWA) Support | 渐进式Web应用程序（PWA）支持 | | | 5 | Router | 路由 | | | 6 | Vuex | Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 | | | 7 | CSS Pre-processors | CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。 | | | 8 | Linter / Formatter | 格式化程序 | Y | | 9 | Unit Testing | 单元测试 | | | 10 | E2E Testing | 端到端（end-to-end） | | #### 3.3 选择手动配置中的选项 向上向下箭头控制方向，空格进行选中，可选择如下配置，引入Router 和vuex以及CSS预处理器，选择完成回车即可  #### 3.4 选择vue版本 因为 vue 3的生态目前还不太健全，建议非尝鲜项目选择 vue 2.x。 #### 3.5 选择是否使用历史模式 此处建议选择不使用，即输入N，选择使用hash模式  #### 3.6 选择CSS预处理器 此处建议选择 Sass/SCSS(with dart-sass)，即直接选择回车即可。 node-sass是自动编译实时的，dart-sass需要保存后才会生效  #### 3.7 选择eslint 校验规则 此处建议选择默认配置，即直接回车即可。  #### 3.8 选择什么时候进行代码校验 此处建议选择第一个，即直接回车即可 Lint on save 保存时检查， Lint and fix on commit 提交时检查  #### 3.9 选择如何存放配置 此处建议选择第二个配置，即存放到package.json文件中。 In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中  #### 3.10 选择是否保存本次配置 建议选择N，即不保存，否则以后创建项目修改不配置不太方便  #### 3.11 等待创建项目  若出现如下界面，表示项目创建完成。  ### 4. 运行创建的vue项目 #### 4.1 进入创建的vue项目的目录 此处选择进入test001(即创建的项目test001的目录)  #### 4.2 在项目目录下执行命令运行项目 ``` npm run serve ```  出现如下页面表示运行成功。  #### 4.3 在浏览器中查看项目运行是否成功 在浏览器中打开上述vue项目部署的地址，看到下图所示即表示项目创建运行成功。  ### 5. 也可以通过vscode打开项目，并运行项目 #### 5.1 打开文件夹 在页面左上角选择File,在下拉菜单中选择 Open Folder  #### 5.2 打开控制台 找到项目所在目录，打开，然后在页面上方选择打开新的控制台（Terminal）  ``` npm run serve //在控制台输入此命令即可 ```  #### 5.3查看项目是否运行成功 点击项目部署地址在浏览器中打开，若出现如下图所示页面，表示项目创建运行成功