一、安装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、安装后, 需要关闭浏览器, 再重新打开, 才能使用。