一. 开发环境
1. 安装node.js
下载安装包,进行安装,默认npm也会一起安装
http://nodejs.cn/download/
2. 配置环境变量
(1) 设置npm的全局模块的存放路径,缓存路径
npm config set prefix "D:\Software\nodejs\node_global"
npm config set cache "D:\Software\nodejs\node_cache"
(2) 设置环境变量
NODE_PATH = "D:\Software\nodejs\node_global"
Path = "D:\Software\nodejs\node_global"
3. 安装 cnpm
//安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
//配置淘宝镜像(不知道之前为啥不用这一操作,有时间再细究)
npm config set registry https://registry.npm.taobao.org
//查看淘宝镜像
npm config get registry
4. 安装 vue-cli
cnpm install -g vue-cli
二. 开发流程
1. 创建项目
(1) 项目名全小写;
(2) 进入工作空间目录,执行以下:
vue init webpack 项目名
2. 运行项目
(1) 设置ip地址和端口号:修改 config / index.js:
module.exports = {
dev: {
...
host: '0.0.0.0',
port: 8080,
(2) 进入项目目录(后续所有cmd操作都在项目目录下),执行:
cnpm run dev
(3) 通过设置的ip和端口访问项目,如 http://10.1.32.96:8080
3. 兼容IE浏览器
(1) vue要求必须 IE9 及以上版本
(2) 进入项目目录,执行以下:
cnpm install --save-dev babel-polyfill
(3) 修改 build / webpack.base.conf.js
module.exports = {
...
entry: {
...
app: ["babel-polyfill", "./src/main.js"]
},
(4) 在 src / main.js 中引入
import 'babel-polyfill'
4. 去除 Eslint 校验
(1) 修改 build / webpack.base.conf.js
module.exports = {
...
module: {
rules: [
...(config.dev.useEslint ? [] : []),
5. 配置后台服务环境
(1) 进入项目目录,执行以下:
cnpm install --save-dev cross-env
(2) 定义打包命令,修改 package.json
"scripts" : {
...
"build": "cross-env type=dev node build/build.js",
"build:dev": "cross-env type=dev node build/build.js",
"build:prod": "cross-env type=prod node build/build.js",
"build:test": "cross-env type=test node build/build.js",
}
(3) 设置环境配置,修改 config/dev.env.js,config/pro.evn.js等文件
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_URL: '"http://xeyserver.dev.vtron.com/alphakids/"'
})
(4) 设置打包命令和环境配置文件的的映射,修改 build/webpack.prod.conf.js
const env = require('../config/'+ process.env.type +'.env')
(5) 设置打包时控制台提示语(非必要),修改 build/build.js
const spinner = ora('building for ' + process.env.type + ' mode ...')
(6) 代码中使用环境配置参数
window.config = {
baseUrl : process.env.API_URL, //后台服务地址
debug : (process.env.NODE_ENV=="development") //只有开发环境下开启debug模式
};
6. 打包项目
(1) 设置资源引用路径,设置报错时不暴露源码:修改 config / index.js:
module.exports = {
dev: {
...
},
build: {
...
assetsPublicPath: './',
productionSourceMap: false,
(2) 设置图片引用路径:修改 build / utils.js:
exports.cssLoaders = function (options) {
...
function generateLoaders(..) {
...
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath : '../../'
})
}
}
(3) 生成代码,在 dist 文件夹中生成 index.html 和 static 文件夹,保持在同一目录下, index.html 即为项目入口
cnpm run build
三. 开发插件
0. 插件引入方式
(1) npm方式,下载到本地,跟着项目一起打包
cnpm install 插件名 --save
(2) cdn方式,引用第三方链接 (https://www.bootcdn.cn/)
在index.html中引入
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
修改 build/webpack.base.conf.js
module.exports = {
...
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'jquery': 'jQuery',
'animate': 'animate'
}
注:element-ui设计到改主题色,cdn方式太麻烦,直接用npm方式。除此之外,其他插件可用cdn则用cdn,初次加载速度更快
1. Jquery
(1) 安装
cnpm install jquery --save
(2) 引入:修改 src / main.js
import jquery from 'jquery'
window.$ = jquery;
window.jQuery = jquery;
2. ElementUI
(1) 安装
cnpm install element-ui --save
(2) 重设主题颜色:新建 css / element-variables.scss 文件
/* 改变主题色变量 */
$--color-primary: #3bb2b8;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
(3) 引入:修改 src / main.js
import elementUI from 'element-ui'
import './css/element-variables.scss'
Vue.use(elementUI);
3. Axios
(1) 安装
cnpm install axios --save
(2) 配置统一请求拦截:新建 js / axios.js 文件
import axios from 'axios';
axios.defaults.baseURL = "http://10.1.32.44/8023/";
axios.defaults.timeout = 5000;
axios.defaults.withCredentials = true; //携带cookie信息,保持session的一致性
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//request 拦截器
axios.interceptors.request.use(
config => {
...
return config;
},
error => {
...
return Promise.reject("系统错误");
}
);
//response 拦截器
axios.interceptors.response.use(
response => {
...
return response.data;
},
error => {
...
return Promise.reject(系统错误);
}
)
window.axios = axios;
(3) 引入:修改 src / main.js
import './js/axios.js'
4. Vuex
(1) 安装
cnpm install vuex --save
(2) 配置 store:新建 store / index.js 和 store / moduleA.js 文件
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//引入分流模块
import moduleA from "./moduleA.js";
export default new Vuex.Store({
state:{
xx: "xx"
},
modules : {
moduleA : moduleA
}
});
export default {
state:{
xx : "xx"
}
}
(3) 引入:修改 src / main.js
import store from './store/index.js'
...
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
5. scss 和 less
(1) 安装
npm install sass-loader --save-dev
npm install node-sass --sava-dev
npm install less less-loader --save-dev
6. vue-layer
(1) 安装
cnpm install vue-layer --save
(2) 引入:修改 src / main.js
import layer from 'vue-layer'
window.layer = layer(Vue);
(3) 说明:功能没有原版layer强大,且elementUI本身提供的弹窗也很好用,因此项目中没用到
7. px2rem-loader
(1) 安装
npm install px2rem-loader --save -dev
(2) 配置:修改 build / utils.js
exports.cssLoaders = function (options) {
...
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 100 // 将代码中px转rem,转换比例:1rem=100px (不转换元素内嵌样式)
}
};
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
...
}
}
8. postcss-px2rem-exclude
(1) 说明:上面的px2rem-loader插件不能自定义过滤掉不转的文件夹
(2) 安装
npm install postcss-px2rem-exclude --save -dev
(3) 配置:修改 .postcssrc.js
module.exports = {
"plugins": {
...
"postcss-px2rem-exclude": {
"remUnit": 10,
"exclude": /static/
}
}
};
9. zepto
(1) 说明:移动端js框架,与Jquery类似
(2) 安装
cnpm install script-loader exports-loader --save -dev
cnpm install zepto --save
(3) 配置:修改 build / webpack.base.conf.js
module.exports = {
...
"module": {
"rules": [
{
test: require.resolve('zepto'),
loader: 'exports-loader?window.Zepto!script-loader'
},
...
]
}
};
(4) 引入:修改 src / main.js
//其实不引人也无妨,因为zepto已经自动挂载到$和Zepto全局变量中
import zepto from 'zepto'
window.$ = zepto;
window.Zepto = zepto;