1.安裝

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括臨川網(wǎng)站建設(shè)、臨川網(wǎng)站制作、臨川網(wǎng)頁制作以及臨川網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，臨川網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到臨川省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過以下方式先卸載它：

npm uninstall vue-cli -g
# 或
yarn global remove vue-cli 

vue-cli 3.x安裝：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

說明：-g / global 表示全局安裝。

安裝完成后可通過以下代碼校驗(yàn)安裝是否成功：

vue --version
# 或
vue -V

2.創(chuàng)建項(xiàng)目

2.1vue create xxx

vue create my-project
# OR
vue ui

按鍵盤上下鍵可以選擇默認(rèn)（default）還是手動(dòng)（Manually），如果選擇default，一路回車執(zhí)行下去就行了

繼續(xù)手動(dòng)一下

2.2若你之前未保存過preset，或若不使用之前保存的preset創(chuàng)建項(xiàng)目，你會(huì)被提示選取一個(gè) preset。你可以選默認(rèn)的包含了基本的 Babel + ESLint 設(shè)置的 preset，也可以選“Munually select features”即“手動(dòng)選擇特性”來選取需要的特性，如下圖所示。一般會(huì)選擇手動(dòng)選擇特性。

選擇之后會(huì)出現(xiàn)如下界面：

選擇配置，看個(gè)人項(xiàng)目需求

注意，空格鍵是選中與取消，A鍵是全選

Babel —— ES6轉(zhuǎn)換器

這個(gè)是解析我們es6的代碼的，因?yàn)閷?duì)于一些低版本的ie瀏覽器，還不能識(shí)別es6代碼，那么vue里面好多要去寫es6的代碼，這個(gè)時(shí)候我們就可以用babel這個(gè)工具將es6的代碼轉(zhuǎn)譯成瀏覽器能識(shí)別的代碼。

TypeScript —— 使用JS的超類語言TS

Progressive Web App Support —— PWA單頁應(yīng)用

Router —— 使用路由管理器

Vuex —— 使用 vue 狀態(tài)管理器

CSS Pre-processors —— CSS預(yù)處理

Linter / Formatter —— Eslint 安裝

Unit Testing —— 單元測(cè)試

E2E Testing —— 單元測(cè)試

可以根據(jù)自己的需求，選擇配置，小穎是這么選的：

選完之后回車

2.3是否使用路由的 history模式，選擇 yes

2.4 選擇css預(yù)處理器，請(qǐng)根據(jù)個(gè)人情況進(jìn)行選擇，這里我選擇的是 Sass/SCSS < with dart-sass>

2.5 選擇 Eslint 的使用方式，我選擇的 ESLint + Prettier

2.6 選擇語法檢查方式，我自己選擇保存就檢測(cè)

第一個(gè)是保存檢測(cè)，第二個(gè)是fix和commit的時(shí)候檢測(cè)

2.7選擇以上的配置文件放置的位置，把babel,postcss,eslint這些配置文件放哪，這里隨便選，我選擇放在獨(dú)立文件夾

2.8 是否保存以上的 preset 配置，可在將來創(chuàng)建項(xiàng)目的時(shí)候直接引用，我選擇no

鍵入N不記錄，如果鍵入Y需要輸入保存名字

確定后，等待下載依賴模塊

3.啟動(dòng)項(xiàng)目

初始完之后，進(jìn)入到項(xiàng)目根目錄： cd my-project

啟動(dòng)項(xiàng)目：npm run serve

在瀏覽器輸入 http://localhost:8080就可以看到vue的歡迎界面

4.打包上線

vue-cli 也提供了打包的命令，在項(xiàng)目根目錄下執(zhí)行： npm run build   執(zhí)行完之后，可以看到在項(xiàng)目根目錄下多出了一個(gè) dist 目錄，該目錄下就是打包好的所有靜態(tài)資源，直接部署到靜態(tài)資源服務(wù)器就好了。

注意：

參考： vue.config.js常用配置

使用vue-cli3.0搭建項(xiàng)目比之前更簡(jiǎn)潔，沒有了build和config文件夾。

vue-cli3的一些服務(wù)配置都遷移到CLI Service里面了，對(duì)于一些基礎(chǔ)配置和一些擴(kuò)展配置需要在根目錄新建一個(gè)vue.config.js文件進(jìn)行配置

module.exports = {
 // 選項(xiàng)...
}

基本路徑

baseUrl從 Vue CLI 3.3 起已棄用使用publicPath來替代。

在開發(fā)環(huán)境下，如果想把開發(fā)服務(wù)器架設(shè)在根路徑，可以使用一個(gè)條件式的值

module.exports = {
 publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
}

構(gòu)建輸出目錄（打包位置）

outputDir

當(dāng)運(yùn)行 vue-cli-service build 時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄

module.exports = {
 outputDir: 'dist',
}

靜態(tài)資源目錄

assetsDir

放置生成的靜態(tài)資源 (js、css、img、fonts) 的目錄

module.exports = {
 assetsDir: 'assets',
}

eslint代碼檢測(cè)

是否開啟eslint保存檢測(cè)，有效值：ture | false | 'error'

設(shè)置為 true 時(shí)， eslint-loader 會(huì)將 lint 錯(cuò)誤輸出為編譯警告。默認(rèn)情況下，警告僅僅會(huì)被輸出到命令行，且不會(huì)使得編譯失敗

希望讓 lint 錯(cuò)誤在開發(fā)時(shí)直接顯示在瀏覽器中，可以使用 lintOnSave: 'error' 。這會(huì)強(qiáng)制  eslint-loader 將 lint 錯(cuò)誤輸出為編譯錯(cuò)誤

webpack-dev-server 相關(guān)配置

devServer: {
  open: true,//設(shè)置自動(dòng)打開
  port: 1880,//設(shè)置端口
  proxy: {
   //設(shè)置代理
　　　　　　'/axios': {
　　　　　　　　target: 'http://101.15.22.98',
　　　　　　　　changeOrigin: true,
　　　　　　　　secure: false, //如果是http接口，需要配置該參數(shù)
　　　　　　　　pathRewrite: {
　　　　　　　　　　'^/axios': ''
　　　　　　　　　　}
　　　　　　　　}
   }
  }
 }

module.exports = {
 // 部署應(yīng)用時(shí)的基本 URL
 publicPath: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',

 // build時(shí)構(gòu)建文件的目錄 構(gòu)建時(shí)傳入 --no-clean 可關(guān)閉該行為
 outputDir: 'dist',

 // build時(shí)放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄
 assetsDir: '',

 // 指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑。
 indexPath: 'index.html',

 // 默認(rèn)在生成的靜態(tài)資源文件名中包含hash以控制緩存
 filenameHashing: true,

 // 構(gòu)建多頁面應(yīng)用，頁面的配置
 pages: {
  index: {
   // page 的入口
   entry: 'src/index/main.js',
   // 模板來源
   template: 'public/index.html',
   // 在 dist/index.html 的輸出
   filename: 'index.html',
   // 當(dāng)使用 title 選項(xiàng)時(shí)，
   // template 中的 title 標(biāo)簽需要是 
   title: 'Index Page',
   // 在這個(gè)頁面中包含的塊，默認(rèn)情況下會(huì)包含
   // 提取出來的通用 chunk 和 vendor chunk。
   chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  // 當(dāng)使用只有入口的字符串格式時(shí)，
  // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
  // 并且如果找不到的話，就回退到 `public/index.html`。
  // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
  subpage: 'src/subpage/main.js'
 },

 // 是否在開發(fā)環(huán)境下通過 eslint-loader 在每次保存時(shí) lint 代碼 (在生產(chǎn)構(gòu)建時(shí)禁用 eslint-loader)
 lintOnSave: process.env.NODE_ENV !== 'production',

 // 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本
 runtimeCompiler: false,

 // Babel 顯式轉(zhuǎn)譯列表
 transpileDependencies: [],

 // 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建
 productionSourceMap: true,

 // 設(shè)置生成的 HTML 中  和