點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

Vue Cli3 創建項目的方法步驟

來源：懂視網責編：小采時間：2020-11-27 22:06:14

Vue Cli3 創建項目的方法步驟

Vue Cli3 創建項目的方法步驟:最近的開發項目中使用了vue-cli 3.0，使用體驗可以說非常棒了，模板更加制定化，配置更加簡潔。以下總結下應用過程中的一些經驗。 1. 安裝 npm install -g @vue/cli 2. 創建一個項目 vue create iview-admin # OR vue ui

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue Cli3 創建項目的方法步驟:最近的開發項目中使用了vue-cli 3.0，使用體驗可以說非常棒了，模板更加制定化，配置更加簡潔。以下總結下應用過程中的一些經驗。 1. 安裝 npm install -g @vue/cli 2. 創建一個項目 vue create iview-admin # OR vue ui

最近的開發項目中使用了vue-cli 3.0，使用體驗可以說非常棒了，模板更加制定化，配置更加簡潔。以下總結下應用過程中的一些經驗。

1. 安裝

npm install -g @vue/cli

2. 創建一個項目

vue create iview-admin
# OR
vue ui

default (babel, eslint) 默認套餐，提供 babel 和 eslint 支持。

Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應該選擇這一項。

TypeScript 支持使用 TypeScript 書寫源碼。
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預處理器。
Linter / Formatter 支持代碼風格檢查和格式化。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。

3. 運行項目

$ npm run serve

4. 在根目錄創建 vue.config.js 空文件，配置文件

module.exports = {
 /** 區分打包環境與開發環境
 * process.env.NODE_ENV==='production' (打包環境)
 * process.env.NODE_ENV==='development' (開發環境)
 * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
 */
 // 基本路徑
 baseUrl: '/',
 //

輸出文件目錄 outputDir: 'dist', // eslint-loader 是否在保存的時候檢查 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 配置項 // https://vue-loader.vuejs.org/en/options.html // vueLoader: {}, // 生產環境是否生成 sourceMap 文件 productionSourceMap: true, // css相關配置 css: { // 是否使用css分離插件 ExtractTextPlugin extract: true, // 開啟 CSS source maps? sourceMap: false, // css預設器配置項 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 插件相關配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // webpack-dev-server 相關配置 devServer: { // open: process.platform === 'darwin', // 自動打開瀏覽器 open: true, host: '0.0.0.0', port: 8080, https: false, hotOnly: false, // 處理跨域問題 proxy: {}, // 設置代理 before: app => {} }, // 第三方插件配置 pluginOptions: { // ... } }

設置代理

# string

module.exports = {

 devServer: {

 proxy: '<url>'

 }

}

 

# Object

module.exports = {

 devServer: {

 proxy: {

 '/api': {

 target: '<url>',

 ws: true,

 changeOrigin: true

 },

 '/foo': {

 target: '<other_url>'

 }

 }

 }

}

啟用dll

啟用dll后，我們的動態庫文件每次打包生成的vendor的[chunkhash]值就會一樣，其值可以是 true/false,也可以制定特定的代碼庫。

module.exports = {

 dll: true

}

module.exports = {

 dll: [

 'dep-a',

 'dep-b/some/nested/file.js'

 ]

}

靜態資源路徑

相對路徑

靜態資源路徑以 @ 開頭代表 <projectRoot>/src

靜態資源路徑以 ~ 開頭，可以引入node modules內的資源

public文件夾里的靜態資源引用

# 在 public/index.html中引用靜態資源

<%= 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相關配置，強烈建議先熟悉webpack-chain和vue-cli 源碼，以便更好地理解這個選項的配置項。

對模塊處理配置

// 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: 在本次項目較小，只對uglifyjs進行了少量的修改，后期如果還有配置上優化會繼續添加。

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']

 }}

 })]

 })

 }

}

全局變量的設置

在項目根目錄創建以下項目：

.env # 在所有環節中執行

.env.local # 在所有環境中執行，git會ignored

.env.[mode] # 只在特定環境執行( [mode] 可以是 "development", "production" or "test" )

.env.[mode].local # 在特定環境執行, git會ignored

.env.development # 只在生產環境執行

.env.production # 只在開發環境執行

在文件里配置鍵值對：

# 鍵名須以VUE_APP開頭

VUE_APP_SECRET=secret

在項目中訪問：

console.log(process.env.VUE_APP_SECRET)

這樣項目中的 process.env.VUE_APP_SECRET 就會被 secret 所替代。

vue-cli 3 就項目性能而言已經相當友好了，私有制定性也特別強，各種配置也特別貼心，可以根據項目大小和特性制定私有預設，對前期項目搭建而言效率極大提升了。

具體請查看 Vue Cli 官網

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue Cli3 創建項目的方法步驟

推薦度：

點擊下載本文 文檔為doc格式

標簽：步驟方法過程

熱門焦點

Vue Cli3 創建項目的方法步驟

Vue Cli3 創建項目的方法步驟

Vue Cli3 創建項目的方法步驟

最新推薦

猜你喜歡

熱門推薦