Vue项目搭建

一、安装nodejs

Node.js简介
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

1、nodejs官网下载windows版本直接下一步安装

https://nodejs.org/en/download/

2、cmd命令，查看是否安装好

查看nodejs版本号

node -v

查看包管理工具版本

npm -v

都能成功显示说明环境没有问题。
安装包命令：

npm install / i 包名
删除包命令：
npm remove / r 包名
安装包并添加到依赖中：
npm i 包名 --save
全局安装包（一般都是工具）：
npm i -g 包名

3、环境变量的配置
（1）在目录nodejs文件夹下创建两个文件夹 node_global 和 node_cache，用来放安装过程的缓存文件以及最终的模块配置位置。
（2）在cmd中输入如下命令：（注意修改为自己nodejs的目录）

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

（3）右键我的电脑–>属性–>高级系统设置–>环境变量 ，新建系统变量，变量名设为 NODE_PATH,变量值为node_modules路径。

（4）并且在path里面新增node_global的目录。

（5）此处注意：如果用户变量里有C:\Users\wang\AppData\Roaming\npm，把这个变量删掉。
（6）修改完成之后，在命令行输入 node 回车，再输入require(‘cluster’) 出现下图即完成配置。

（7）查看当前全局安装路径：

npm root -g

二、安装vue-cli 3.x

vue官网

https://cn.vuejs.org/v2/guide/

1、安装 yarn 并设置淘宝镜像源。

npm install -g yarn 

npm set registry https://registry.npm.taobao.org --global
npm set disturl https://npm.taobao.org/dist --global
npm set sass_binary_site https://npm.taobao.org/mirrors/node-sass
npm set electron_mirror https://npm.taobao.org/mirrors/electron
npm set puppeteer_download_host https://npm.taobao.org/mirrors
npm set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver
npm set operadriver_cdnurl https://npm.taobao.org/mirrors/operadriver 
npm set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs
npm set selenium_cdnurl https://npm.taobao.org/mirrors/selenium
npm set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass --global
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ --global
yarn config set puppeteer_download_host https://npm.taobao.org/mirrors --global
yarn config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver --global
yarn config set operadriver_cdnurl https://npm.taobao.org/mirrors/operadriver --global
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs --global
yarn config set selenium_cdnurl https://npm.taobao.org/mirrors/selenium --global
yarn config set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector --global
npm cache clean --force
yarn cache clean --force

2、安装全局vue-cli脚手架,用于帮助搭建所需的模板框架
进入D盘vue目录下执行命令。
（1）vue-cli安装指定版本，去官网找版本号

https://github.com/vuejs/vue-cli/releases

npm install -g @vue/cli@3.9.1

（2）vue-cli安装最新稳定版本

npm install -g @vue/cli

（3）查看版本

vue -V

（4）卸载

npm uninstall -g vue-cli 
npm uninstall -g @vue/cli

（5）清理缓存

npm cache clean --force
yarn cache clean --force

3、创建项目
进入D盘 vue 目录下，可视化创建

vue ui

或者命令创建

vue create vue_demo

创建完项目之后

yarn global add @vue/cli-init

4、打包发布项目
打包
npm run build
发布1：使用静态服务器工具包
npm install -g serve
serve dist
发布2: 使用动态web 服务器(tomcat)
修改配置: webpack.prod.conf.js
output: {
publicPath: ‘/vue_demo/’ //打包文件夹的名称
}
重新打包:
npm run build
将dist文件夹拷贝出来然后修改dist 文件夹为项目名称: vue_demo，然后拷贝到运行的tomcat的webapps目录下
访问: http://localhost:8080/vue_demo

三、idea使用vue

1、安装vue.js插件
2、创建vue模板

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'vue模板页'
    }
  }
}
</script>

<style>
</style>

3、Idea无法识别vue文件问题
无法识别的意思是打开文件代码显示为灰色，且没有代码提示，此方法同样适用其他文件没有被识别：
（1）打开settings，搜索File Types
（2）在Recognized File Types中选中HTML
（3）Registered Patterns中添加“*.vue”
（4）点击Apply，点击OK

4、去掉Eslint检测，修改webpack.base.conf.js，将rules下面一行注释掉，如下：

...(config.dev.useEslint ? [createLintingRule()] : []),

5、配置和运行vue项目

6、vue调试工具vue-devtools安装及使用
浏览器商店直接安装
Chrome Extension(谷歌浏览器)

https://chrome.google.com/webstore/detail/vuejsdevtools/
nhdogjmejiglipccpnnnanhbledajbpd

Firefox Addon(火狐浏览器)

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools

Workaround for Safari(Safari浏览器)

https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-safari.md

(不翻墙，无法访问谷歌的)手动安装教程(需要安装node)：
（1）到github下载：

git clone https://github.com/vuejs/vue-devtools

（2）在vue-devtools目录下安装依赖包

cd vue-devtools
cnpm install

（3）修改 manifest.json 文件

把 “persistent”:false 改成 true

（4）编译代码

npm run build

（5）扩展Chrome插件
Chrome浏览器 > 更多程序 > 拓展程序
点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入
注意：
1、vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的。
2、安装后, 需要关闭浏览器, 再重新打开, 才能使用。