Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟
更新時(shí)間：2018年10月15日 11:52:42 作者：spolier
Vue CLI是一個(gè)用于快速Vue.js開(kāi)發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
最近的開(kāi)發(fā)項(xiàng)目中使用了vue-cli 3.0，使用體驗(yàn)可以說(shuō)非常棒了，模板更加制定化，配置更加簡(jiǎn)潔。以下總結(jié)下應(yīng)用過(guò)程中的一些經(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 書(shū)寫(xiě)源碼。
- 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)境與開(kāi)發(fā)環(huán)境
* process.env.NODE_ENV==='production' (打包環(huán)境)
* process.env.NODE_ENV==='development' (開(kāi)發(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可以這樣寫(xiě)
// 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,
// 開(kāi)啟 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)打開(kāi)瀏覽器
open: true,
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 處理跨域問(wèn)題
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)庫(kù)文件每次打包生成的vendor的[chunkhash]值就會(huì)一樣，其值可以是 true/false,也可以制定特定的代碼庫(kù)。
module.exports = {
dll: true
}
module.exports = {
dll: [
'dep-a',
'dep-b/some/nested/file.js'
]
}
靜態(tài)資源路徑
相對(duì)路徑
- 靜態(tài)資源路徑以 @ 開(kāi)頭代表 <projectRoot>/src
- 靜態(tài)資源路徑以 ~ 開(kā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 # 只在開(kāi)發(fā)環(huán)境執(zhí)行
在文件里配置鍵值對(duì)：
# 鍵名須以VUE_APP開(kāi)頭 VUE_APP_SECRET=secret
在項(xiàng)目中訪(fǎng)問(wèn)：
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?element表格某一列內(nèi)容過(guò)多,超出省略號(hào)顯示的實(shí)現(xiàn)
這篇文章主要介紹了vue?element表格某一列內(nèi)容過(guò)多,超出省略號(hào)顯示的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要為大家詳細(xì)介紹了vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
CLI是一個(gè)全局安裝的npm包，提供了終端里的vue命令。它可以通過(guò)vue create快速搭建一個(gè)新項(xiàng)目，或者直接通過(guò)vue serve構(gòu)建新想法的原型。你也可以通過(guò)vue ui通過(guò)一套圖形化界面管理你的所有項(xiàng)目2022-11-11
Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)
Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-04-04
vue-cli安裝全過(guò)程(附帶cnpm安裝不成功及vue不是內(nèi)部命令)
這篇文章主要介紹了vue-cli安裝全過(guò)程(附帶cnpm安裝不成功及vue不是內(nèi)部命令),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue 實(shí)現(xiàn)input表單元素的disabled示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)input表單元素的disabled示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
uniapp小程序上傳文件webapi后端項(xiàng)目asp.net完整代碼
在uniapp中,實(shí)現(xiàn)文件上傳功能也變得非常簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序上傳文件webapi后端項(xiàng)目asp.net的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
基于vue3&element-plus的暗黑模式實(shí)例詳解
實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue-cli項(xiàng)目中使用echarts圖表實(shí)例
在本篇文章里我們給大家分享了關(guān)于vue中使用echarts圖表的實(shí)現(xiàn)方法，有興趣的朋友們學(xué)習(xí)下。2018-10-10
Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串
這篇文章主要介紹了Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串,需要的朋友可以參考下2018-10-10