首页使用vue-cli脚手架安装项目开发包, 以及配置git环境
Vue+vuex+axios+rem(flex)
配置4个环境,调用不同的接口:local(本地开发)、beta(测试)、pre(预上线)、prod(正式上线)
一、修改index.html文件
修改头部meta标签
Plain Text
// 使用lib-flexible 可去掉这段代码,会自动添加的
引入手机端 调试面板--开发者模式(F12)
Plain Text
head 引入
调用:
二、将px转化为rem,适配移动端
// 安装lib-flexible
npm i lib-flexible --save
// 引入lib-flexible -- 在main.js中引入
import 'lib-flexible/flexible'
// 安装px2rem-loader
npm i px2rem-loader --save
// 配置px2rem-loader
在build文件中找到 util.js, 将px2rem-loader 添加到 cssLoaders中
Plain Text
// ******更改utils.js中的这段代码********
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// ******新增********
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // 设计稿宽度除10 (750/10)
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// ******替换为下面的代码******
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// 配置完成后重启,就自动转化为rem了
npm run dev
三、解决移动端点击事件的300ms延迟
在main.js 里面操作
1.安装fastclick
npm install fastclick --save
2.引入
import FastClick from 'fastclick'
3.使用
FastClick.attach(document.body)
四、ES6的兼容性--转es5
在main.js 里面操作
1、安装 babel-polyfill
npm install babel-polyfill --save-dev
2、引入--在main.js头部
import 'babel-polyfill'
五、使用Vuex
1、安装
npm install vuex --save
2、新建文件夹store -- 建文件index.js -- 建文件(模块化)
Plain Text
import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
import bridge from './module/bridge' // 引入store的一个模块
Vue.use(Vuex) // 使用vuex
export default new Vuex.Store({ // 输出vuex的一个状态
modules: {
namespaced: true,
modA: bridge // 引入模块
}
})
//***在main.js文件中使用 store
import store from './store' // 引入store文件
new Vue({
el: '#app',
router, // ***使用router路由
store, // *******使用store
components: { App },
template: ' '
})
六、引入基础css样式
在assets 静态文件夹中新建文件夹css,添加 reset.css 和 border.css 文件
1、main.js 引入 reset.css 重置样式
import '@/assets/css/reset.css'
2、main.js 引入 border.css 解决1px的边框显示问题
import '@/assets/css/border.css'
七、可-使用sass
1、 安装 node-sass
npm install node-sass --save-dev
2、 安装 sass-loader
npm install sass-loader --save-dev
3、使用
Plain Text
八、可-使用stylus
1、 安装 node-sass
npm install stylus --save-dev
2、 安装 sass-loader
npm install stylus-loader --save-dev
3、使用
Plain Text
九、路由按需加载js
解决一次性加载js文件过大,打开首页慢点问题
1、安装 syntax-dynamic-import 插件
npm install babel-plugin-syntax-dynamic-import --save-dev
2、配置 .babelrc 文件,文件在根目录下
{
plugins: ["syntax-dynamic-import"]
}
3、路由中引入文件的写法
将 import Foo from '@/pages/foo' 写为
const Foo = () => import('@/pages/foo')
在打包的时候,自动生成的chunk包名字是 乱码,我们可以指定命名--采用魔法注释
可增加魔法注释,/* webpackChunkName:'foo' */ foo为指定模块名字
const Foo = () => import(/* webpackChunkName:'foo' */ '@/pages/foo')
4、webpack增加配置
chunkFilename: '[name].js'
Plain Text
在webpack.bas.conf.js中的 output需要加个chunkFilename: '[name].js'
entry: {
app: [resolve("./app.js")],
},
output: {
path: resolve("./dist"),
publicPath: '',
filename: "assets/js/[name].js",
chunkFilename: "chunk/[name].js",
},
十、多环境配置-- 有点麻烦
在node中 process指当前node进程,全局属性, 可设置 process.env.NODE_ENV 为一个全局变量值
local(本地开发)、beta(测试)、pre(预上线)、prod(正式上线)
1、安装cross-env
npm install cross-env --save-dev
可在多平台使用 NODE_ENV 命令 (window、mac、Linux)
2、更改命令
Plain Text
在package.json 文件中 更改 scripts 内容
"scripts": {
"dev": "cross-env NODE_ENV=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js",
"local": "cross-env NODE_ENV=local npm run build",
"pre": "cross-env NODE_ENV=pre npm run build",
"beta": "cross-env NODE_ENV=beta npm run build"
},
npm run dev :通过cross-env 设置整个项目的全局变量 NODE_ENV 的值
npm run start : 在本地启动项目
npm run lint: 进行eslint 代码规范检测
npm run build:对项目进行打包
npm run local: 令NODE_ENV= local 然后进行打包
npm run pre: 令NODE_ENV= pre 然后进行打包
npm run beta: 令NODE_ENV= beta 然后进行打包
3、项目build 打包的时候在dist 中生成不同的 包文件
可查看源代码内容,进行详细了解
在src 内建一个config文件夹,再内部建5个文件, 判断在NODE_ENV不同值的情况下调用哪个值
Plain Text
src中新建的 config文件夹内的
// *******index.js
const localConfig = require('./local.js')
const betaConfig = require('./beta.js')
const preConfig = require('./pre.js')
const prodConfig = require('./prod.js')
let env = process.env.NODE_ENV
let config = null
if (env === 'local' || env === 'dev' || env === 'development') {
config = localConfig
} else if (env === 'beta') {
config = betaConfig
} else if (env === 'pre') {
config = preConfig
} else {
config = prodConfig
}
module.exports = config
// *******local.js问件
module.exports = {
assetsRoot: '../dist/local/', // build打包生成的文件路径
// 可配置其他内容,比如 不同环境调去不同的 接口路径
uploadUrl: ‘https://baidu.com/’
}
4、更改项目根目录下的config文件夹中的 index.js文件
Plain Text
项目--config--index.js
// 引入src中的config的index.js文件
const _config = require('../src/config/index.js')
// 更改module.exports 中的 build 配置项内容
// 将 ../dist 都改为动态的
build: {
// Template for index.html
//index: path.resolve(__dirname, '../dist/index.html'),
index: path.resolve(__dirname, _config.assetsRoot + 'index.html'),
// Paths
// assetsRoot: path.resolve(__dirname, '../dist'),
assetsRoot: path.resolve(__dirname, _config.assetsRoot + ''),
assetsSubDirectory: 'static',
// assetsPublicPath: '/',
assetsPublicPath: _config.assetsPublicPath, // 拼接静态资源的前缀
5、 build文件中的 地方也需要更改