怎么使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置

這篇文章將為大家詳細(xì)講解有關(guān)怎么使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

1. 使用vue-cli3新建項(xiàng)目： https://cli.vuejs.org/zh/guide/creating-a-project.html

注意，我這里用gitbash不好選擇選項(xiàng)，我就用了基本的cmd（系統(tǒng)命令提示符）：上下箭頭和空格鍵可控制選項(xiàng)。

詳細(xì)步驟：

（1）vue create init： 這里我選擇了自定義配置

（2）使用上下箭頭和空格進(jìn)行選擇，我這里選擇了這四個(gè)，之所以沒用css pre-processors是因?yàn)槲业捻?xiàng)目中要用postcss-cssnext，后面會有詳細(xì)配置說明

（3）后面的

Use class-style component syntax? 是否使用class風(fēng)格的組件語法?

Use Babel alongside TypeScript for auto-detected polyfills? 是否使用babel做轉(zhuǎn)義?

Use history mode for router? 是否使用路由的history模式?

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 把babel,postcss,eslint這些配置文件放哪?

Save this as a preset for future projects? (Y/n) 是否記錄一下以便下次繼續(xù)使用這套配置?

2. 改項(xiàng)目端口（個(gè)人需求）： 在根目錄新建vue.config.js（vue-cli3其他配置相關(guān)也寫在這里）

module.exports = {
 devServer: {
  port: 8100, // 端口號
 }
}

3. 根據(jù)環(huán)境設(shè)置相關(guān)變量（比如請求地址、打包輸出路徑等），并打包不同環(huán)境代碼

（1）在根目錄新建appconf.json，保存不同環(huán)境的對應(yīng)變量配置

{
 "dev": {
 "serverUrl": "http://localhost:57156/"
 },
 "build": {
 "serverUrl": "http://build.com/",
 "outputDir": "../../dist/build",      
 "productId": "111"
 },
 "alpha": {
 "serverUrl": "http://build-test.com/",
 "outputDir": "../../dist/alpha",
 "productId": "222"
 }
}

（2）src下新建common文件夾，下面新建configByEnv.js，根據(jù)環(huán)境設(shè)置對應(yīng)變量值

var path = require('path')
var appconf = require('../../appconf.json')
var serverurl
var productId = ''
switch (process.env.NODE_ENV) {
 case 'production':
  serverurl = appconf.build.serverUrl
  productId = appconf.build.productId
  break
 case 'development':
  serverurl = appconf.dev.serverUrl
  break
 case 'alpha':
  serverurl = appconf.alpha.serverUrl
  productId = appconf.alpha.productId
  break
}
// 配置 build 文件輸出路徑, 可以使用絕對路徑或相對路徑
var outputDir
var reg = /^\.(\.)?\/.*/
if (reg.test(appconf.build.outputDir)) {
 if (process.env.NODE_ENV == 'alpha')
  outputDir = path.resolve(__dirname, appconf.alpha.outputDir) // 相對路徑
 else
  outputDir = path.resolve(__dirname, appconf.build.outputDir) // 相對路徑
} else {
 if (process.env.NODE_ENV == 'alpha')
  outputDir = appconf.alpha.outputDir
 else
  outputDir = appconf.build.outputDir // 絕對路徑
}
var conf = {
 outputDir: outputDir,
 serverUrl: serverurl,
 env: process.env.NODE_ENV,
 productId: productId
}
module.exports = conf

（3） 在需要用以上變量的地方引入即可，如

.js中： var { outputDir } = require('./src/common/configByEnv.js');

.ts中：import {serverUrl} from '@/common/configByEnv.js'；

注意：ts這樣引入會報(bào)錯(cuò)，需要將tsconfig.json中添加  "allowJs": true,

-------- 上面針對某些變量根據(jù)不同環(huán)境設(shè)置了不同值，那么打包時(shí)只要更改環(huán)境，打包后則會取到不同環(huán)境對應(yīng)的特定值 -----

因?yàn)轫?xiàng)目中已經(jīng)有開發(fā)環(huán)境和打包build環(huán)境，我這里只要再加一個(gè)打包alpha測試環(huán)境：

（1）package.json 中添加

{
 ···
 "scripts": {
 "serve": "vue-cli-service serve",
 "alpha": "vue-cli-service build --mode alpha",
 "build": "vue-cli-service build"
 }
 ···
}

（2）根目錄新建.env.alpha，其內(nèi)容為：

NODE_ENV = 'alpha'


（3）在vue.config.js設(shè)置打包輸出路徑

var { outputDir } = require('./src/common/configByEnv.js');
module.exports = {
 outputDir: outputDir,
 ···
}

4. 在項(xiàng)目中引入并配置postcss-nextcss

1.

// npm install autoprefixer --save-dev 此步不需要了，因?yàn)閜ostcss-cssnext自帶這個(gè)依賴

npm install postcss-cssnext --save-dev

npm install postcss-import --save-dev

npm install postcss-loader --save-dev

2. package.json中如果沒有自動生成以下內(nèi)容，則手動添加以下內(nèi)容

{
 ··· 
 "postcss": {
 "plugins": {
  "postcss-cssnext": {}
 }
 },
 ··· 
}

5. 引入組件庫：我這里用了elementUI，配置步驟：

第一步：進(jìn)入到項(xiàng)目目錄里

npm i element-ui -S

第二步：在main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

關(guān)于“怎么使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。