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è)，之所以沒(méi)用css pre-processors是因?yàn)槲业捻?xiàng)目中要用postcss-cssnext，后面會(huì)有詳細(xì)配置說(shuō)明

（3）后面的

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

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)也寫(xiě)在這里）

module.exports = {
 devServer: {
  port: 8100, // 端口號(hào)
 }
}

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

（1）在根目錄新建appconf.json，保存不同環(huán)境的對(duì)應(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è)置對(duì)應(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 文件輸出路徑, 可以使用絕對(duì)路徑或相對(duì)路徑
var outputDir
var reg = /^\.(\.)?\/.*/
if (reg.test(appconf.build.outputDir)) {
 if (process.env.NODE_ENV == 'alpha')
  outputDir = path.resolve(__dirname, appconf.alpha.outputDir) // 相對(duì)路徑
 else
  outputDir = path.resolve(__dirname, appconf.build.outputDir) // 相對(duì)路徑
} else {
 if (process.env.NODE_ENV == 'alpha')
  outputDir = appconf.alpha.outputDir
 else
  outputDir = appconf.build.outputDir // 絕對(duì)路徑
}
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這樣引入會(huì)報(bào)錯(cuò)，需要將tsconfig.json中添加  "allowJs": true,

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

因?yàn)轫?xiàng)目中已經(jīng)有開(kāi)發(fā)環(huán)境和打包build環(huán)境，我這里只要再加一個(gè)打包alpha測(cè)試環(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è)依賴(lài)

npm install postcss-cssnext --save-dev

npm install postcss-import --save-dev

npm install postcss-loader --save-dev

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

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

5. 引入組件庫(kù)：我這里用了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)

以上為vue-cli3初始化項(xiàng)目和一些基礎(chǔ)配置，可根據(jù)個(gè)人喜好將ts和css文件與.vue分離。然后，愉快的寫(xiě)代碼吧。。

總結(jié)

以上所述是小編給大家介紹的使用vue-cli3新建一個(gè)項(xiàng)目并寫(xiě)好基本配置 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論