怎么使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、景洪網(wǎng)絡(luò)推廣、小程序制作、景洪網(wǎng)絡(luò)營(yíng)銷、景洪企業(yè)策劃、景洪品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供景洪建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：muchs.cn

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，后面會(huì)有詳細(xì)配置說明

（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)也寫在這里）

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)有開發(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è)依賴

npm install postcss-cssnext --save-dev

npm install postcss-import --save-dev

npm install postcss-loader --save-dev

2. package.json中如果沒有自動(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)

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

新聞名稱：怎么使用vue-cli3新建一個(gè)項(xiàng)目并寫好基本配置-創(chuàng)新互聯(lián)
本文來(lái)源：http://muchs.cn/article40/deieho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、軟件開發(fā)、App開發(fā)、服務(wù)器托管、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)