最近我們的vue項目搭建框架升級到了vue-cli3.0，此文記錄一下我們搭建項目時的經驗，大牛請見諒；
初始化
首先安裝vue-cli3.0,
npm install -g @vue/cli
# OR
yarn global add @vue/cli
然後我們可以運行命令創建一個新項目
vue create hello-world
或者我們也可以使用圖形化界面
vue ui
上述命令會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目創建的流程
然後我們按照提示安裝我們需要的功能並初始化項目即可；
配置服務及webpack
在vue-cli3.0中對於代理服務的配置跟vue-2.x 有所不同，我們需要在項目的根目錄下新建一個vue.config.js文件，我們的配置都是在這個文件裏面做的，
// vue.config.js
const path = require('path');
// 引入骨架屏插件
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
//拋出我們的配置
module.exports = {
devServer: {
// 設置默認端口
port: 8082,
// 配置服務代理
proxy: {
'/mobileService_web_shopkeeper': {
// 目標 API 地址
target: '你的代理服務器地址',
changeOrigin: true,
pathRewrite : {
'^/api' : '/api'
}
}
},
},
// 配置webpack
configureWebpack: (config)=>{
// console.log(config);
config.plugins.push(new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: path.join(__dirname, './src/skeleton.js'),
},
},
minimize: true,
quiet: true,
}))
},
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改它的選項...
options.i18n = '@kazupon/vue-i18n-loader'
return options
})
},
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啓 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {
// 給 sass-loader 傳遞選項
sass: {
// @/ 是 src/ 的別名
// 所以這裏假設你有 `src/variables.scss` 這個文件
data: `@import "@/common.scss";`
}
},
// 啓用 CSS modules for all css / pre-processor files.
modules: false
}
};
更多設置
結語
在此感謝各位大牛爲vue生態所做的貢獻，這才使我們在開發過程中遇到的各種問題得以有好的解決方法,並且此次3.0的更新力度還是很大的，儘快升級儘快享受哦😯。