基本信息请浏览 官方文档
项目创建
step1 创建项目，选择自己的配置信息
vue create my-project
step2 设置不同环境的变量信息
（1）开发环境 .env.development
NODE_ENV = development
VUE_APP_API_PREFIX = http://test.xxx.com
VUE_APP_STORAGE_PREFIX = TEST_XXX
VUE_APP_PUBLICK_PATH = /
（2）测试环境.env.qa
NODE_ENV = production
VUE_APP_API_PREFIX = http://test.xxx.com
VUE_APP_STORAGE_PREFIX = TEST_XXX
VUE_APP_PUBLICK_PATH = /TEST_XXX/
（3）生产环境.env.production
NODE_ENV = production
VUE_APP_API_PREFIX = http://xxx.com
VUE_APP_STORAGE_PREFIX = XXX
VUE_APP_PUBLICK_PATH = /XXX/
step3 修改 package.json
"scripts": {
"dev": "vue-cli-service serve",
"build:qa": "vue-cli-service build --mode qa",
"build:prod": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
step4 修改 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>
(function ($) {
$._injection = {
API_PREFIX: '<%= VUE_APP_API_PREFIX %>',
STORAGE_PREFIX: '<%= VUE_APP_STORAGE_PREFIX %>'
}
})(window);
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
step5 增加 vue.config.js
const path = require('path')
module.exports = {
devServer: {
port: 8100
},
publicPath: process.env.VUE_APP_PUBLICK_PATH,
assetsDir: new Date().getTime().toString(32),
// productionSourceMap: false,
css: {
extract: process.env.NODE_ENV !== 'development',
loaderOptions: {
less: {
paths: [
path.resolve(__dirname, 'src/assets/styles'),
path.resolve(__dirname, 'src/assets/styles/less')
]
}
}
},
chainWebpack: config => {
config.performance.set('maxEntrypointSize', 400 * 1024)
config.performance.set('maxAssetSize', 550 * 1024)
config.resolve.alias.set('@img', path.resolve(__dirname, 'src/assets/images/'))
config.optimization.splitChunks({
cacheGroups: {
vendor: {
chunks: 'all',
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
common: {
chunks: 'all',
test: /[\\/]src[\\/]common[\\/]/,
name: 'common',
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 100
}
}
})
return config
}
}
配置markdown
npm install vue-markdown-loader markdown-it markdown-it-container --save
文件 vue.config.js
const markdownRender = require('markdown-it')()
module.exports = {
chainWebpack: config => {
config.module
.rule('md')
.test(/\.md$/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use("vue-markdown-loader")
.loader('vue-markdown-loader/lib/markdown-compiler')
.options({
raw: true,
use: [
[require('markdown-it-container'), 'demo', {
validate: function (params) {
return params.trim().match(/^demo\s*(.*)$/)
},
render: function (tokens, idx) {
console.log(tokens, idx)
if (tokens[idx].nesting === 1) {
// 1.获取第一行的内容使用markdown渲染html作为组件的描述
let demoInfo = tokens[idx].info.trim().match(/^demo\s+(.*)$/)
let description = (demoInfo && demoInfo.length > 1) ? demoInfo[1] : ''
let descriptionHTML = description ? markdownRender.render(description) : ''
// 2.获取代码块内的html和js代码
let content = tokens[idx + 1].content
// 3.使用自定义开发组件【DemoBlock】来包裹内容并且渲染成案例和代码示例
return `<demo-block>
<div class="source" slot="source">${content}</div>
${descriptionHTML}
<div class="highlight" slot="highlight">`
} else {
return '</div></demo-block>\n'
}
}
}]
]
})
}
}
如何使用mockjs
1.首先安装mockjs
npm install mockjs --save-dev
2.在项目目录下面新建mock文件夹和 mock/index.js文件
// mock/index.js
import Mock from 'mockjs'
export const audios = Mock.mock(/\/list/, 'get', function () {
const data = []
const pagination = {
total: data.length,
page_total: 1,
page: 1
}
return {
code: 0,
data,
pagination
}
})
3.修改vue.config.js，在链式操作中增加如下代码
if (process.env.NODE_ENV === 'development') {
config.entry('index').add('./mock/index.js').end()
}
