Vue脚手架搭建项目

一、 安装Node.js

(一) 注意事项

1. 注意电脑系统版本以及位数，按照自己电脑的环境下载相应的Node.js安装包

2. 确定运行项目的Node.js版本和npm版本，避免后期因为版本不同而产生的一些差异问题

3. 在官网下载Node安装包时请下载稳定版（或不同版本的稳定版），正确区分稳定版（LTS）和最新版（Current）

(二) 下载安装

双击安装包，一直点下一步，请自定义安装目录（推荐），然后一直点下一步，最后安装成功即可。

(三) 检测验证

在键盘按下【win+R】键，输入cmd，然后回车，打开命令行界面，进入命令提示符窗口，分别输入以下命令，显示版本号，则安装成功

node -v         显示安装的nodejs版本

npm -v         显示安装的npm版本

(四) 更改全局下载路径

1、 一般情况下全模块所在路径和缓存路径放在node安装目录，所以在安装目录下新建【node_global】和【node_cache】文件

2、 命令行设置路径

打开命令行界面，输入下面命令：

npm config set prefix " C:\Tools\web\Nodejs\node_global"

npm config set cache " C:\Tools\web\Nodejs\node_cache"

(五) 配置环境变量

1、 在【用户变量】Path下新增【C:\Tools\web\Nodejs\node_global】环境变量

2、 在系统变量下新建【NODE_PATH】,变量值：【C:\Tools\web\Nodejs\node_global\node_modules】

3、 在系统变量【Path】下新增【%NODE_PATH %】变量

  

4、 测试验证 

npm install express -g     # -g是全局安装的意思（会下载到C:\Tools\web\Nodejs\node_global\node_modules目录），不加 -g 就是默认下载到当前目录

能正确下载到配置的目录表示node环境配置成功！

注意：

若执行命令npm install express -g 出现如下报错，是由于权限的原因，右击Nodejs文件夹->属性->安全，点击编辑，将所有权限都✔即可。

(六) 全局安装cnpm

由于npm的服务器在海外，所以访问速度比较慢，访问不稳定 ，cnpm的服务器是由淘宝团队提供 服务器在国内cnpm是npm镜像，一般会同步更新，相差在10分钟，所以cnpm在安装一些软件时候会比较有优势。但是一般cnpm只用于安装时候，所以在项目创建与卸载等相关操作时候我们还是使用npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行成功后目录会出现cnpm文件

如果出现“xxx不是内部命令”说明没找到命令

① 可以尝试关闭cmd窗口，然后重新打开cmd

② 环境变量配置不完整（重点）

二、 安装Vue脚手架

(一) 安装Vue-cli脚手架

命令行执行cnpm install --g vue-cli下载脚手架

检测vue环境：vue -V

(二) 创建项目

vue create  code    //其中code为你的项目目录名称 

  (enter键确认,并进入下一步)

然后选择第三个自定义项目环境Manually select features(手动选择项目特性)

(三) 选择运行环境

（按键盘空格表示选中或者取消）

• Babel 主要是对es6语法转换成兼容的js （选上）

• TypeScript 支持使用TypeScript语法来编写代码

• Progressive Web App (PWA) Support [把网页做的更像原生app]

• Router 支持vue路由配置插件（一般都会选择）

• Vuex 支持vue程序状态管理模式 (一般都会选择)

• CSS Pre-processors 支持css预处理器 （一般都会选择）

• Linter / Formatter 支持代码风格检查和格式化 （选上）

• Unit Testing 单元测试

• E2E Testing E2E测试

-----------------------------------------------------------------

选择vue版本

这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n用hash模式

-----------------------------------------------------------------

问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个

-----------------------------------------------------------------

选择一种格式化代码方式：我一般选择 ESLint + Prettier

-----------------------------------------------------------------

意思是问你什么时候进行代码规则检测，我一般会选择保存就检测，也就是Lint on Save

-----------------------------------------------------------------

意思是将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件干净点，所以选择第一个

-----------------------------------------------------------------

这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了

根据指令提示 我们先执行cd code，然后执行npm run serve，就可以正常启动项目了

三、 项目配置

(一) 项目结构

api：数据请求接口目录，封装Http请求并挂在于vue原型链上

utils：工具事件目录，封装公共方法

assets：静态资源文件，css、img等，这个文件内容不会被压缩

components：组件模板文件，用于存放公共组件

mixin：混入组件，相当于提出公共方法，在需要的地方可多次使用

router：路由组件，可做全局路由配置和拦截

store：临时存储，引入vuex-persist做持久化存储（相当于locastrong本地存储）

views：页面资源文件

(二) Scss预处理器

可以做公共css样式，公共变量，公共css方法

在vue.config.js 配置公共scss资源加载方式（注意：公共scss文件并不能在<style>里面直接引用，也不能在main.js里面加载，mian.js只能加载css文件）

(三) vuex持久化缓存

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 ，它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。

但是由于网页刷新，vuex管理器里面的数据就会丢失，造成问题，原本是想通过watch监听方式实时缓存vuex，并且已经实现。然后突然发现有成熟方式vuex-persist，支持常见的locastrong，seesionstrong，cookie等。

引入 import VuexPersistence from 'vuex-persist'

四、 Nodejs多个版本切换

（注意：如果要使用nvm，必须先卸载已经安装的nodejs）

(一) 下载nvm

下载地址：https://github.com/coreybutler/nvm-windows/releases

(二) 安装nvm

在cmd命令行输入nvm,如果出现nvm版本号和一系列帮助指令，则说明nvm安装成功

(三) 修改settings.txt配置

在你安装的目录下找到settings.txt文件，打开后加上 ，这一步主要是将npm镜像改为淘宝的镜像，可以提高下载速度。

nvm node_mirror: https://npm.taobao.org/mirrors/node/ 

nvm npm_mirror: https://npm.taobao.org/mirrors/npm/

(四) 获取可安装nodejs版本

可以先使用 nvm list 查看本地已安装的版本

nvm list available获取所有可以安装的 Node.js 版本

LTS 指最新稳定版本，CURRENT 指最新版本，一般安装 LTS

(五) 安装指定版本Node.js

nvm install 10.11.0

(六) 列出所有已安装版本

nvm list

(七) 指定使用nodejs版本

只用指定使用的 Node.js 版本后，nodejs 的才真正安装了

nvm use 10.11.0（注意: 以管理员身份运行）

(八) 卸载某个版本

nvm uninstall 10.11.0

(九) nvm常用命令

nvm list 查看已经安装的版本

nvm list installed 查看已经安装的版本

nvm list available 查看网络可以安装的版本

nvm version 查看当前的版本

nvm install 安装最新版本nvm

nvm use <version> ## 切换使用指定的版本node

nvm ls 列出所有版本

nvm current显示当前版本

nvm alias <name> <version> ## 给不同的版本号添加别名

nvm unalias <name> ## 删除已定义的别名

nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包

nvm on 打开nodejs控制

nvm off 关闭nodejs控制

nvm proxy 查看设置与代理

nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror，如果不设置的默认是 https://nodejs.org/dist/

nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是： https://github.com/npm/npm/archive/.

nvm uninstall <version> 卸载制定的版本

nvm use [version] [arch] 切换制定的node版本和位数

nvm root [path] 设置和查看root路径