VUE

Spring Boot+Vue从零开始搭建系统（一）：项目前端_Vuejs环境搭建

Spring Boot+Vue从零开始搭建系统（二）：项目前端_Vuejs目录结构描述

Spring Boot+Vue从零开始搭建系统（三）：项目前后端分离_实现简单登录demo

 

参考文档：
https://www.cnblogs.com/zhaomeizi/p/8483597.html
https://segmentfault.com/a/1190000013950461

1、进入Node.js官网：https://nodejs.org/en/，选择下载并安装Node.js

2、设置nodejs prefix（全局）和cache（缓存）路径（---非必须---）
在nodejs安装路径下，新建node_global和node_cache两个文件夹）
设置缓存文件夹：npm config set cache "D:\vueProject\nodejs\node_cache"
设置全局模块存放路径：npm config set prefix "D:\vueProject\nodejs\node_global"

3、设置环境变量：（---非必须---）

4、验证Node.js是否安装好，在windows下，win+r召唤出运行窗口，输入cmd打开命令行窗口。输入node -v即可得到对应的Node.js版本。

5、npm包管理器是集成在Node.js中了，所以在安装Node.js的时候就已经自带了npm，输入npm -v可得到npm的版本。

6、输入以下命令npm -g install npm，更新npm至最新版本。（---非必须---）

5、安装cnpm
执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org ,使用npm的国内镜像（npm 国内镜像 https://npm.taobao.org/）cnpm 命令代替默认的npm命令，增加依赖包加载速度且避免资源限制。

6、cnpm安装脚手架vue-cli
在命令行中运行命令 cnpm install -g vue-cli 安装脚手架。

6、构建VUE项目：然后执行命令进入F:workspacesvue-workspace路径目录下，再输入新建项目命令 vue init webpack javalsj-vue，执行后会自动生成vue项目。
vue init webpack javalsj-vue

7、安装VUE项目所需要的依赖：进入项目所在路径目录下F:workspacesvue-workspace\javalsj-vue，然后输入命令 cnpm install 安装项目所需的依赖包资源。
（博主在下载第三方开源项目运行的时候，有时会遇到奇怪的报错，然后通过先执行cnpm rebuild node-sass，后执行cnpm install解决，此步骤不是必须的。）
cnpm install

8、运行项目:进入F:workspacesvue-workspacejavalsj-vue目录下，然后再输入命令npm run dev 来运行项目。
npm run dev

9、浏览器访问项目
浏览器访问地址 http://localhost:8080 就可以看到欢迎界面了。

10、安装element-ui：参考文档：https://www.jianshu.com/p/5aba2aecc1f3

$cnpm i element-ui -S