Vue CLI3詳細(xì)搭建過程以及vue+vuex分析
01-介紹
Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)。有三個(gè)組件：
CLI：@vue/cli 全局安裝的 npm 包，提供了終端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）
CLI 服務(wù)：@vue/cli-service是一個(gè)開發(fā)環(huán)境依賴。構(gòu)建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）
CLI 插件：給Vue 項(xiàng)目提供可選功能的 npm 包 （如：Babel/TypeScript 轉(zhuǎn)譯、ESLint 集成、unit和 e2e測(cè)試 等）
?02-安裝
1、全局安裝過舊版本的?vue-cli(1.x 或 2.x)要先卸載它，否則跳過此步：
操作如下：
可以看到我之前的版本是2.9.6，卸載成功后，vue命令便不存在了
ps：npm WARN警告，可能是coffee-script 的某個(gè)依賴包改名了（coffee-script本身已經(jīng)淘汰了）
2、Vue CLI 3需要 nodeJs ≥ 8.9?(官方推薦 8.11.0+，你可以使用 nvm 或 nvm-windows在同一臺(tái)電腦中管理多個(gè) Node 版本）。
（1）查看node 版本
（2）下載安裝nodeJs很簡(jiǎn)單（和其他系統(tǒng)軟件一樣根據(jù)需求按步驟安裝）這里不做介紹，中文官方下載地址：http://nodejs.cn/download/
3、安裝@vue/cli（Vue CLI 3的包名稱由 vue-cli 改成了 @vue/cli）
操作如下圖：
查看版本：
結(jié)果如下圖：
?03-使用
1、vue create 搭建新項(xiàng)目（1）新建項(xiàng)目：*官方提示：如果你在 Windows 上通過 minTTY 使用 Git Bash，交互提示符并不工作，必須通過 winpty vue.cmd create hello-world 啟動(dòng)這個(gè)命令
具體操作如下：
首先，會(huì)提示你選擇一個(gè)preset（預(yù)設(shè)）：① 除最后兩個(gè)，其他選項(xiàng)都是你此前保存的預(yù)設(shè)配置（如下圖第一個(gè)“ preset-config”是我之前保存的預(yù)設(shè)配置，如今便可以直接用了）：
如果沒有配置保存過，則只有以下兩個(gè)選項(xiàng)：
② default（babel，eslint）：默認(rèn)設(shè)置（直接enter）非常適合快速創(chuàng)建一個(gè)新項(xiàng)目的原型，沒有帶任何輔助功能的 npm包
③ Manually select features：
手動(dòng)配置（按方向鍵 ↓）是我們所需要的面向生產(chǎn)的項(xiàng)目，提供可選功能的 npm 包
手動(dòng)配置，根據(jù)你需要用方向鍵選擇（按 “空格鍵”選擇/取消選擇，A鍵全選/取消全選）對(duì)應(yīng)功能
簡(jiǎn)介：
選擇完后直接enter，然后會(huì)提示你選擇對(duì)應(yīng)功能的具體工具包，選擇自己擅長(zhǎng)或者使用廣泛的（方便遇到問題時(shí)百度），簡(jiǎn)介如下：
①是否使用history router：
Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實(shí)現(xiàn)前端路由（通過調(diào)用瀏覽器提供的接口）
hash：瀏覽器url址欄 中的 # 符號(hào)（如這個(gè) URL：http://www.abc.com/#/hello，hash 的值為“ #/hello”），hash 不被包括在 HTTP 請(qǐng)求中（對(duì)后端完全沒有影響），因此改變 hash 不會(huì)重新加載頁面
history：利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定瀏覽器支持）。單頁客戶端應(yīng)用，history mode 需要后臺(tái)配置支持（詳細(xì)參見：https://router.vuejs.org/zh/guide/essentials/history-mode.html）
② css預(yù)處理器
主要為css解決瀏覽器兼容、簡(jiǎn)化CSS代碼 等問題（* Sass誕生于2007年，最早也是最成熟的一款CSS預(yù)處理器語言。）
③ ESLint：
提供一個(gè)插件化的javascript代碼檢測(cè)工具
④ 何時(shí)檢測(cè)：
⑤ 單元測(cè)試 ：
⑥ 如何存放配置 ：
⑦ 是否保存本次配置（之后可以直接使用）：
（2）搭建完成
項(xiàng)目結(jié)構(gòu)如下（不同的預(yù)設(shè)包含不同的文件，大致結(jié)構(gòu)一致）：
對(duì)比之前的項(xiàng)目包：
精簡(jiǎn)的只剩靈魂了~ ，主要的大的區(qū)別如下：
① vuex（狀態(tài)管理）：
vue cli 2 中 ：vuex是搭建完成后自己npm install的，并不包括在搭建過程中?？梢钥吹絭ue cli 2的vuex默認(rèn)文件夾（store）又包含了三個(gè)js文件：action（存放一些調(diào)用外部API接口的異步執(zhí)行的的方法，然后commit mutations改變mutations 數(shù)據(jù)）、index（初始化mutations 數(shù)據(jù)，是store的出口）、mutations（處理數(shù)據(jù)邏輯的同步執(zhí)行的方法的集合，Vuex中store數(shù)據(jù)改變的唯一方法commit mutations）
vue cli 3 中：vuex是包含在搭建過程供選擇的預(yù)設(shè)。vue cli 3 中默認(rèn)只用一個(gè)store.js代替了原來的store文件夾中的三個(gè)js文件。action、mutations、state以及store 的 getters 的用法有很多，舉常用的例子：
eg：store.js：
使用時(shí)，eg：main.js：
views/home.vue：
② router （路由）：
vue cli 2 ：“ router/index.js ”
vue cli 3：“router.js”（用法和做的事都一樣）
③ 去掉 static 、 新增 public 文件夾
vue cli 2 ：static 是 webpack 默認(rèn)存放靜態(tài)資源的文件夾，打包時(shí)會(huì)直接復(fù)制一份到dist文件夾不會(huì)經(jīng)過 webpack 編譯
vue cli 3 ：摒棄 static 新增了 public 。vue cli 3 中“靜態(tài)資源”兩種處理方式：
經(jīng)webpack 處理：在 JavaScript 被導(dǎo)入或在 template/CSS 中通過“相對(duì)路徑”被引用的資源會(huì)被編譯并壓縮
不經(jīng)webpack 處理：放置在 public 目錄下或通過絕對(duì)路徑被引用的資源將會(huì)“直接被拷貝”一份，不做任何編譯壓縮處理
④ index.html ：
vue cli 2 ：“index.html ”
vue cli 3 ：“public/index.html ”此模板會(huì)被 html-webpack-plugin 處理的
⑤ src/views：
vue cli 3 的 src文件夾 新增 views文件夾 用來存放 “頁面”，區(qū)分 components（組件）
⑥ 去掉 build（根據(jù)config中的配置來定義規(guī)則）、config（配置不同環(huán)境的參數(shù)）文件夾 ：
vue cli 3 中 ，這些配置 你可以通過 命令行參數(shù)、或 vue.config.js （在根目錄 新建一個(gè) vue.config.js 同名文件）里的 devServer 字段配置開發(fā)服務(wù)器
⑦ babel.config.js：
配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，這個(gè)配置文件不會(huì)使用基于文件位置的方案，而是會(huì)一致地運(yùn)用到項(xiàng)目根目錄以下的所有文件，包括 node_modules 內(nèi)部的依賴。官方推薦在 Vue CLI 項(xiàng)目中始終使用 babel.config.js 取代其它格式。
⑧ 根目錄的一些其他文件的改變：
之前所有的配置文件都在vue create 搭建時(shí)preset預(yù)設(shè) 或者 后期可以通過 命令參數(shù) 、 vue.config.js 中配置
根據(jù)需要在根目錄下新建 vue.config.js自行配置，eg：（簡(jiǎn)單配置，更多配置詳情參見官網(wǎng)：https://cli.vuejs.org/zh/config/）
module.exports = {
? baseUrl: '/',// 部署應(yīng)用時(shí)的根路徑(默認(rèn)'/'),也可用相對(duì)路徑(存在使用限制)
? outputDir: 'dist',// 運(yùn)行時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄(默認(rèn)''dist''，構(gòu)建之前會(huì)被清除)
? assetsDir: '',//放置生成的靜態(tài)資源(s、css、img、fonts)的(相對(duì)于 outputDir 的)目錄(默認(rèn)'')
? indexPath: 'index.html',//指定生成的 index.html 的輸出路徑(相對(duì)于 outputDir)也可以是一個(gè)絕對(duì)路徑。
? pages: {//pages 里配置的路徑和文件名在你的文檔目錄必須存在 否則啟動(dòng)服務(wù)會(huì)報(bào)錯(cuò)
? ? index: {//除了 entry 之外都是可選的
? ? ? entry: 'src/index/main.js',// page 的入口,每個(gè)“page”應(yīng)該有一個(gè)對(duì)應(yīng)的 JavaScript 入口文件
? ? ? template: 'public/index.html',// 模板來源
? ? ? filename: 'index.html',// 在 dist/index.html 的輸出
? ? ? title: 'Index Page',// 當(dāng)使用 title 選項(xiàng)時(shí),在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
? ? ? chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在這個(gè)頁面中包含的塊，默認(rèn)情況下會(huì)包含,提取出來的通用 chunk 和 vendor chunk
? ? },
? ? subpage: 'src/subpage/main.js'//官方解釋：當(dāng)使用只有入口的字符串格式時(shí),模板會(huì)被推導(dǎo)為'public/subpage.html',若找不到就回退到'public/index.html',輸出文件名會(huì)被推導(dǎo)為'subpage.html'
? },
? lintOnSave: true,// 是否在保存的時(shí)候檢查
? productionSourceMap: true,// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
? css: {
? ? extract: true,// 是否使用css分離插件 ExtractTextPlugin
? ? sourceMap: false,// 開啟 CSS source maps
? ? loaderOptions: {},// css預(yù)設(shè)器配置項(xiàng)
? ? modules: false// 啟用 CSS modules for all css / pre-processor files.
? },
? devServer: {// 環(huán)境配置
? ? host: 'localhost',
? ? port: 8080,
? ? https: false,
? ? hotOnly: false,
? ? open: true, //配置自動(dòng)啟動(dòng)瀏覽器
? ? proxy: {// 配置多個(gè)代理(配置一個(gè) proxy: 'http://localhost:4000' )
? ? ? '/api': {
? ? ? ? target: '<url>',
? ? ? ? ws: true,
? ? ? ? changeOrigin: true
? ? ? },
? ? ? '/foo': {
? ? ? ? target: '<other_url>'
? ? ? }
? ? }
? },
? pluginOptions: {// 第三方插件配置
? ? // ...
? }
};
?（3）npm run serve 跑起來~
webstorm打開項(xiàng)目（個(gè)人習(xí)慣，你也可以搭建完直接順勢(shì)運(yùn)行），運(yùn)行后webstorm自動(dòng)生成了個(gè).idea文件（用來存放項(xiàng)目的配置信息，如：括版本控制信息、歷史記錄等）
（4）查看運(yùn)行結(jié)果：打開瀏覽器，輸入運(yùn)行結(jié)果提示的地址（上上圖紅框），enter
（5）拉取 2.x 模板 (舊版本)：
Vue CLI 3 覆蓋了舊版本的vue 命令，如果需要使用舊版本的 vue init 功能，可以全局安裝一個(gè)橋接工具：
（6）在現(xiàn)有的項(xiàng)目中安裝插件（vue add 命令），eg：官方提示：vue add 的設(shè)計(jì)意圖是為了安裝和調(diào)用 Vue CLI 插件。這不意味著替換掉普通的 npm 包。對(duì)于這些普通的 npm 包，你仍然需要選用包管理器
！官方警告：我們推薦在運(yùn)行 vue add 之前將項(xiàng)目的最新狀態(tài)提交，因?yàn)樵撁羁赡苷{(diào)用插件的文件生成器并很有可能更改你現(xiàn)有的文件。
2、vue ui 圖形化界面創(chuàng)建項(xiàng)目
命令行輸入命令，操作如下：
然后會(huì)自動(dòng)打?yàn)g覽器頁面，選擇創(chuàng)建如下：
結(jié)果如下：頁面提示正在安裝依賴：
本地已有項(xiàng)目包了
安裝完成：你可以在這管理（安裝、刪除）插件、運(yùn)行并分析你的項(xiàng)目文件
轉(zhuǎn)載自CSDN博主「不懂代碼的小石」，原文鏈接：https://blog.csdn.net/weixin_44387725/java/article/details/909041
原360教育CTO小班親授
校招Offer月薪6000~10000+
心動(dòng)了就點(diǎn)擊下方課程詳細(xì)了解吧
還有巨大優(yōu)惠哦！
6月7日前報(bào)名，立減4000
6月15日前報(bào)名，優(yōu)惠2000
6月25日前報(bào)名，優(yōu)惠1000
END
就業(yè)那么難，還沒有實(shí)習(xí)項(xiàng)目經(jīng)歷，來在線實(shí)習(xí)
拿OFFER 面向大學(xué)生校招，
是集職位介紹與推薦、職業(yè)規(guī)劃、
咨詢和在線實(shí)習(xí)為一體的一站式職前教育平臺(tái)。
致力于幫助找工作、找實(shí)習(xí)的大學(xué)生
斬獲心儀的Offer,明晰職業(yè)規(guī)劃。
置頂“拿OFFFER”，我們不見不散。
