快速部署

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴(lài)，走你
$ cd my-project
$ npm install
$ npm run dev

詳細(xì)部署

基本環(huán)境

node 安裝 及 安裝成功驗(yàn)證

• 安裝node程序
• 檢驗(yàn)安裝成功及版本校驗(yàn)
  • 使用自帶的cmd命令行
  • 使用windows下git bash
    
    node版本校驗(yàn)及安裝查看.png
    
    
    查看npm包管理工具安裝成功否.png

安裝vue腳手架工具vue-cli. 執(zhí)行語(yǔ)句： npm install vue-cli -g

下載vue-cli包.png

vue-cli初始化webpack項(xiàng)目

執(zhí)行語(yǔ)句： vue init webpack new-project

引導(dǎo)語(yǔ)句頁(yè)面.png

對(duì)應(yīng)引導(dǎo)句講解：
1、回車(chē)跳轉(zhuǎn)下一個(gè)引導(dǎo)配置問(wèn)題。
2、Project name 填寫(xiě)你定義的項(xiàng)目名稱(chēng)； project description 后面填寫(xiě)對(duì)項(xiàng)目的描述； Author 填寫(xiě)作者名
3、之后會(huì)問(wèn)到是夠安裝vue-router / 是否用ESLint / 是否建立Unit單元測(cè)試 / E2E 黑盒測(cè)試 / Karma + Mocha

• ESLint的作用是檢查代碼錯(cuò)誤和統(tǒng)一代碼風(fēng)格的。確認(rèn)添加ESLint后，在創(chuàng)建的項(xiàng)目中就會(huì)出現(xiàn).eslintignore和.eslintrc.js兩個(gè)文件。
  • eslintignore類(lèi)似Git的.gitignore用來(lái)忽略一些文件不使用ESLint檢查。
  • eslintrc.js是ESLint配置文件，用來(lái)設(shè)置插件、自定義規(guī)則、解析器等配置。
• Karma是一個(gè)基于Node.js的JavaScript測(cè)試執(zhí)行過(guò)程管理工具（Test Runner）。該工具在Vue中的主要作用是將項(xiàng)目運(yùn)行在各種主流Web瀏覽器進(jìn)行測(cè)試。
• Mocha是一個(gè)測(cè)試框架，在vue-cli中實(shí)現(xiàn)單元測(cè)試。

運(yùn)行項(xiàng)目

執(zhí)行語(yǔ)句：
cd new-project
npm install
npm run dev

項(xiàng)目啟動(dòng)三部曲.png

將執(zhí)行語(yǔ)句集成在package.json中的script模塊 , 只需要npm start即可以執(zhí)行

image.png

項(xiàng)目目錄結(jié)構(gòu)

詳細(xì)的目錄介紹.png

• build 操作文件，使用npm run *執(zhí)行的就是這里的文件（Webpack配置文件）
• config配置文件，執(zhí)行文件需要的配置信息
  • index.js（主要的項(xiàng)目配置文件）
• src 資源文件，所有的組件以及所用的圖片都在此
  • assets 資源文件夾，圖片之類(lèi)的資源（模塊化資源<由webpack處理>）
  • components組件文件夾，寫(xiě)的所以組件（UI組件）
  • router路由文件夾，決定頁(yè)面的跳轉(zhuǎn)規(guī)則
  • App.vue 應(yīng)用組件，所有自己的寫(xiě)的組件，都在這個(gè)組件之上。（主APP的部件）
  • main.js webpack入口文件，webpack四大特征：entry入口，output輸出，loader加載器，plugins插件。可以在項(xiàng)目中build\webpack.base.config.js中看到 （12行）看入口文件在哪兒。（app入口文件）
• static（純靜態(tài)資源）
• node_modules文件夾，所有依賴(lài)的模塊
• package.json 不允許有任何注釋?zhuān)莕pm的入口文件（建設(shè)的script和依賴(lài)）
• test
  • unit （單元測(cè)試）
  • e2e （e2e測(cè)試）
• editorconfig （為編輯器進(jìn)行的縮進(jìn)，空格，和相似設(shè)置）
• eslintignore（eslint忽略規(guī)則）
• eslintrc.js （eslint的配置）
• postcssrc.js （postcss的配置）
• index.html （index.html模板）
• babelrc（babel的配置）

程序執(zhí)行的過(guò)程

npm run dev

1. 先找到目錄下的package.json文件
2. 找到文件中的scripts項(xiàng)
3. 找到對(duì)應(yīng)的dev命令："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
4. 按照dev命令中的路徑找到對(duì)應(yīng)的build下的webpack.dev.conf.js文件
5. 按照腳本的程序執(zhí)行
   • 引入版本檢測(cè)文件check-versions
   • 引入配置文件，process.env.NODE_ENV獲取環(huán)境變量
6. 判斷當(dāng)前運(yùn)行的測(cè)試開(kāi)發(fā)環(huán)境，使用console.log(process.env.NODE_ENV)將獲取到的值打印到cmd中.(看到的值是config\dev.env.js第五行定義的值development開(kāi)發(fā)模式)
7. 引入一些模塊，根據(jù)環(huán)境變量來(lái)判斷我們要引入的執(zhí)行文件（webpack.dev.conf）
8. 修改端口號(hào)（process.env/process.env.PORT/config.dev.port>>>8080）

webpack.base.conf是webpack的基礎(chǔ)文件，是核心文件，必須執(zhí)行的文件。包含entry和output 這是入口和輸出路徑
main.js創(chuàng)建一個(gè)vue實(shí)例，并加載了模板組件App.vue

Vue-cli + webpack 配置多頁(yè)面操作

參考