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

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

詳細步驟：

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

（2）使用上下箭頭和空格進行選擇，我這里選擇了這四個，之所以沒用css pre-processors是因為我的項目中要用postcss-cssnext，后面會有詳細配置說明

（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. 改項目端口（個人需求）： 在根目錄新建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這樣引入會報錯，需要將tsconfig.json中添加  "allowJs": true,

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

因為項目中已經(jīng)有開發(fā)環(huán)境和打包build環(huán)境，我這里只要再加一個打包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. 在項目中引入并配置postcss-nextcss

1.

// npm install autoprefixer --save-dev 此步不需要了，因為postcss-cssnext自帶這個依賴

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，配置步驟：

第一步：進入到項目目錄里

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初始化項目和一些基礎(chǔ)配置，可根據(jù)個人喜好將ts和css文件與.vue分離。然后，愉快的寫代碼吧。。

總結(jié)

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

最新評論