首頁使用vue-cli腳手架安裝項目開發包, 以及配置git環境
Vue+vuex+axios+rem(flex)
配置4個環境,調用不同的接口:local(本地開發)、beta(測試)、pre(預上線)、prod(正式上線)
一、修改index.html檔案
修改頭部meta标簽
Plain Text
// 使用lib-flexible 可去掉這段代碼,會自動添加的
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
引入手機端 調試面闆--開發者模式(F12)
Plain Text
head 引入
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
調用:
<script>
var vConsole = new vConsole()
</script>
二、将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: '<App/>'
})
六、引入基礎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
<style > // 标簽上加上 scss
#app {
color: #2c3e50;
margin-top: 60px;
img {
width: 750px;
}
}
</style>
八、可-使用stylus
1、 安裝 node-sass
npm install stylus --save-dev
2、 安裝 sass-loader
npm install stylus-loader --save-dev
3、使用
Plain Text
<style type="text/stylus" scoped>
.header-fixed
z-index 2
font-size .32rem
.header-fixed-back
position absolute
top 0
left 0
</style>
九、路由按需加載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檔案中的 地方也需要更改