Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟
更新時(shí)間：2018年10月15日 11:52:42 作者：spolier
Vue CLI是一個(gè)用于快速Vue.js開發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
最近的開發(fā)項(xiàng)目中使用了vue-cli 3.0，使用體驗(yàn)可以說非常棒了，模板更加制定化，配置更加簡(jiǎn)潔。以下總結(jié)下應(yīng)用過程中的一些經(jīng)驗(yàn)。
1. 安裝
npm install -g @vue/cli
2. 創(chuàng)建一個(gè)項(xiàng)目
vue create iview-admin # OR vue ui
- default (babel, eslint) 默認(rèn)套餐，提供 babel 和 eslint 支持。
- Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應(yīng)該選擇這一項(xiàng)。
- TypeScript 支持使用 TypeScript 書寫源碼。
- Progressive Web App (PWA) Support PWA 支持。
- Router 支持 vue-router 。
- Vuex 支持 vuex 。
- CSS Pre-processors 支持 CSS 預(yù)處理器。
- Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
- Unit Testing 支持單元測(cè)試。
- E2E Testing 支持 E2E 測(cè)試。
3. 運(yùn)行項(xiàng)目
$ npm run serve
4. 在根目錄創(chuàng)建 vue.config.js 空文件，配置 文件
module.exports = {
/** 區(qū)分打包環(huán)境與開發(fā)環(huán)境
* process.env.NODE_ENV==='production' (打包環(huán)境)
* process.env.NODE_ENV==='development' (開發(fā)環(huán)境)
* baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
*/
// 基本路徑
baseUrl: '/',
// 輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時(shí)候檢查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
//如果想要引入babel-polyfill可以這樣寫
// configureWebpack: (config) => {
// config.entry = ["babel-polyfill", "./src/main.js"]
// },
// vue-loader 配置項(xiàng)
// https://vue-loader.vuejs.org/en/options.html
// vueLoader: {},
// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: true,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否啟用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
// dll: false,
// PWA 插件相關(guān)配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相關(guān)配置
devServer: {
// open: process.platform === 'darwin',
// 自動(dòng)打開瀏覽器
open: true,
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 處理跨域問題
proxy: {}, // 設(shè)置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
設(shè)置代理
# string
module.exports = {
devServer: {
proxy: '<url>'
}
}
# Object
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
啟用dll
啟用dll后，我們的動(dòng)態(tài)庫文件每次打包生成的vendor的[chunkhash]值就會(huì)一樣，其值可以是 true/false,也可以制定特定的代碼庫。
module.exports = {
dll: true
}
module.exports = {
dll: [
'dep-a',
'dep-b/some/nested/file.js'
]
}
靜態(tài)資源路徑
相對(duì)路徑
- 靜態(tài)資源路徑以 @ 開頭代表 <projectRoot>/src
- 靜態(tài)資源路徑以 ~ 開頭，可以引入node modules內(nèi)的資源
public文件夾里的靜態(tài)資源引用
# 在 public/index.html中引用靜態(tài)資源
<%= webpackConfig.output.publicPath %>
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico" rel="external nofollow" >
# vue templates中，需要在data中定義baseUrl
<template>
<img :src="`${baseUrl}my-image.png`">
</template>
<script>
data () {
return {
baseUrl: process.env.BASE_URL
}
}
</script>
webpack配置修改
用 webpack-chain 修改webpack相關(guān)配置，強(qiáng)烈建議先熟悉webpack-chain和vue-cli 源碼，以便更好地理解這個(gè)選項(xiàng)的配置項(xiàng)。
對(duì)模塊處理配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('js')
.include
.add(/some-module-to-transpile/) // 要處理的模塊
}
}
修改webpack Loader配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('scss')
.use('sass-loader')
.tap(options =>
merge(options, {
includePaths: [path.resolve(__dirname, 'node_modules')],
})
)
}
}
修改webpack Plugin配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
return [/* new args to pass to html-webpack-plugin's constructor */]
})
}
}
eg: 在本次項(xiàng)目較小，只對(duì)uglifyjs進(jìn)行了少量的修改，后期如果還有配置上優(yōu)化會(huì)繼續(xù)添加。
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config
.plugin('uglify')
.tap(([options]) =>{
// 去除 console.log
return [Object.assign(options, {
uglifyOptions: { compress: {
drop_console : true,
pure_funcs: ['console.log']
}}
})]
})
}
}
全局變量的設(shè)置
在項(xiàng)目根目錄創(chuàng)建以下項(xiàng)目：
.env # 在所有環(huán)節(jié)中執(zhí)行 .env.local # 在所有環(huán)境中執(zhí)行，git會(huì)ignored .env.[mode] # 只在特定環(huán)境執(zhí)行( [mode] 可以是 "development", "production" or "test" ) .env.[mode].local # 在特定環(huán)境執(zhí)行, git會(huì)ignored .env.development # 只在生產(chǎn)環(huán)境執(zhí)行 .env.production # 只在開發(fā)環(huán)境執(zhí)行
在文件里配置鍵值對(duì)：
# 鍵名須以VUE_APP開頭 VUE_APP_SECRET=secret
在項(xiàng)目中訪問：
console.log(process.env.VUE_APP_SECRET)
這樣項(xiàng)目中的 process.env.VUE_APP_SECRET 就會(huì)被 secret 所替代。
vue-cli 3 就項(xiàng)目性能而言已經(jīng)相當(dāng)友好了，私有制定性也特別強(qiáng)，各種配置也特別貼心，可以根據(jù)項(xiàng)目大小和特性制定私有預(yù)設(shè)，對(duì)前期項(xiàng)目搭建而言效率極大提升了。
具體請(qǐng)查看 Vue Cli 官網(wǎng)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)打印指定組件內(nèi)容的示例詳解
這篇文章主要和大家分享一下vue中打印指定組件內(nèi)容,多頁打印自動(dòng)適配紙張大小打印的方案,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-03-03
這篇文章主要介紹了MVVM 框架解析之雙向綁定,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要給大家介紹了關(guān)于少女風(fēng)vue組件庫的制作全過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了使用vant?自定義彈框全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue3響應(yīng)式API之ref的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
自從入了 Vue 之后，一直在用 axios 這個(gè)庫來做一些異步請(qǐng)求。下面這篇文章主要給大家介紹了關(guān)于axios中cookie跨域及相關(guān)配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧。2017-12-12
vuex+axios+element-ui實(shí)現(xiàn)頁面請(qǐng)求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實(shí)現(xiàn)頁面請(qǐng)求loading操作,結(jié)合實(shí)例形式分析了vuex+axios+element-ui實(shí)現(xiàn)頁面請(qǐng)求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-02-02
Vue-cli中為單獨(dú)頁面設(shè)置背景色的實(shí)現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨(dú)頁面設(shè)置背景色的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue實(shí)現(xiàn)城市列表選擇功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07