初始环境npm+node+webstorm:
没有的请到官网( http://nodejs.cn/download/)下载node,node里面包含了npmcnpm:
cnpm是npm的淘宝镜像,可以加快npm install的下载安装速度,减少报错可能,推荐使用
如果安装速度过慢,请安装cnpm
命令行中输入:npm i -g cnpm --registry=https://registry.npm.taobao.org
下面全部使用cnpm
Vue新建项目:
cnpm i -g vue vue-cli webpack -g
解释:
此命令用于安装vue的基础环境
i 表示install安装
-g表示global全局安装
webpack是官方推荐的打包工具
i 表示install安装
-g表示global全局安装
webpack是官方推荐的打包工具
vue init webpack youProjectName
解释:
此命令用于创建项目
youProjectName处输入你项目的名字
命令行中:
project name 请输入项目的名字,可以修改或回车(默认是括号里的内容)
project description 请描述你的项目,可以修改或回车(默认是括号里的内容)
author 请输入作者,一般写你名字的缩写就行
vue build 请选择使用风格
runtime+compiler是运行加编译(开发选这个)
runtime-only是运行版本(线上选这个)
install vue-router 是否安装路由,回车安装
use eslint to lint your code ,是否安装eslint代码风格检查器,新手建议不安装输入n回车
后面几个测试的全部n回车
cd youProjectName
解释:
进入项目
cnpm i
解释:
根据package.json里面的设置安装默认的依赖
依赖全部放在node_modules文件夹中
如果是用webstorm2017,编译器会对node_modules中海量文件建立索引导致变卡,只需要如图设置就不卡了
cnpm i iview@latest axios qs --save
解释:
@latest表示最新版本
安装vue的ui插件iview
安装promise风格的类ajax插件 axios
安装qs用于解析json
--save表示运行时依赖这些环境
cnpm i stylus stylus-loader css-loader style-loader --save-dev
解释:
webpack是一款强大的打包工具,自身可以打包js文件;需要打包其他类型的文件时需要引入一些loader
stylus是一门css的编译语言,语法更简洁,功能更强大,推荐使用
--save-dev表示development环境依赖但production环境不再依赖
npm start | npm run dev
解释:
运行此项目
官方是npm run dev,为什么npm start也可以?
因为package.json的scripts里面配置了npm start==npm run dev
cnpm run build
解释:
使用webpack打包
打包结果在youProjectName下面的dist中
只需将dist目录放到tomcat中并设置主页为dist/index.html即可在线上环境运行
(ps:有问题随时可以留言问我)