快速部署
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
詳細部署
基本環境
node 安裝 及 安裝成功驗證
- 安裝node程序
- 檢驗安裝成功及版本校驗
- 使用自帶的cmd命令行
- 使用windows下
git bash
node版本校驗及安裝查看.png
查看npm包管理工具安裝成功否.png
安裝vue腳手架工具
vue-cli. 執行語句：npm install vue-cli -g
下載vue-cli包.png
vue-cli初始化webpack項目
執行語句：
vue init webpack new-project
引導語句頁面.png
對應引導句講解：
1、回車跳轉下一個引導配置問題。
2、Project name 填寫你定義的項目名稱； project description 后面填寫對項目的描述； Author 填寫作者名
3、之后會問到是夠安裝vue-router / 是否用ESLint / 是否建立Unit單元測試 / E2E 黑盒測試 / Karma + Mocha
- ESLint的作用是檢查代碼錯誤和統一代碼風格的。確認添加ESLint后，在創建的項目中就會出現
.eslintignore和.eslintrc.js兩個文件。- eslintignore類似Git的.gitignore用來忽略一些文件不使用ESLint檢查。
- eslintrc.js是ESLint配置文件，用來設置插件、自定義規則、解析器等配置。
- Karma是一個基于Node.js的JavaScript測試執行過程管理工具（Test Runner）。該工具在Vue中的主要作用是將項目運行在各種主流Web瀏覽器進行測試。
- Mocha是一個測試框架，在vue-cli中實現單元測試。
運行項目
執行語句：
cd new-project
npm install
npm run dev
項目啟動三部曲.png
將執行語句集成在
package.json中的script模塊 , 只需要npm start即可以執行
image.png
項目目錄結構
詳細的目錄介紹.png
-
build 操作文件，使用
npm run *執行的就是這里的文件（Webpack配置文件） -
config配置文件，執行文件需要的配置信息
- index.js（主要的項目配置文件）
-
src 資源文件，所有的組件以及所用的圖片都在此
- assets 資源文件夾，圖片之類的資源（模塊化資源<由webpack處理>）
- components組件文件夾，寫的所以組件（UI組件）
- router路由文件夾，決定頁面的跳轉規則
- App.vue 應用組件，所有自己的寫的組件，都在這個組件之上。（主APP的部件）
-
main.js webpack入口文件，webpack四大特征：entry入口，output輸出，loader加載器，plugins插件。可以在項目中
build\webpack.base.config.js中看到 （12行）看入口文件在哪兒。（app入口文件）
- static（純靜態資源）
- node_modules文件夾，所有依賴的模塊
- package.json 不允許有任何注釋，是npm的入口文件（建設的script和依賴）
-
test
- unit （單元測試）
- e2e （e2e測試）
- editorconfig （為編輯器進行的縮進，空格，和相似設置）
- eslintignore（eslint忽略規則）
- eslintrc.js （eslint的配置）
- postcssrc.js （postcss的配置）
- index.html （index.html模板）
- babelrc（babel的配置）
程序執行的過程
npm run dev
- 先找到目錄下的
package.json文件 - 找到文件中的
scripts項 - 找到對應的
dev命令："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" - 按照dev命令中的路徑找到對應的build下的
webpack.dev.conf.js文件 - 按照腳本的程序執行
- 引入版本檢測文件
check-versions - 引入配置文件，
process.env.NODE_ENV獲取環境變量
- 引入版本檢測文件
- 判斷當前運行的測試開發環境，使用
console.log(process.env.NODE_ENV)將獲取到的值打印到cmd中.(看到的值是config\dev.env.js第五行定義的值development開發模式) - 引入一些模塊，根據環境變量來判斷我們要引入的執行文件（
webpack.dev.conf） - 修改端口號（
process.env/process.env.PORT/config.dev.port>>>8080）
webpack.base.conf是webpack的基礎文件，是核心文件，必須執行的文件。包含entry和output 這是入口和輸出路徑
main.js創建一個vue實例，并加載了模板組件App.vue
