VUE從入門到放棄（項目全流程）————VUE

VUE從入門到放棄（第一天）——整體流程

先想想一個項目，vue項目是從什麼到什麼，然後再什麼的？那是什麼呢？

1. 搭建 （ vue-cli）
2. 代碼內容
3. 運行
4. 封裝
5. 成品

一.搭建（腳手架vue-cli）

首先node.js，npm，vue-cli（腳手架）一定要有，這裏不細講。裝就完事了。

進想放的文件夾，vue init webpack XXXVue(項目名稱，隨你取)，配置：

1. Project name (my-vue)？————————-項目名稱(My-Vue)？

2. Project description (A Vue.js project)————————-項目說明(Vue.js項目)？

3. Author？————————-作者？

4. Runtime + Compiler: recommended for most users———————-運行時編譯器：推薦給大多數用戶

5. Install vue-router? (Y/n)————————-安裝vue路由

6. Use ESLint to lint your code? (Y/n)(啓動校驗？？就是查查你的代碼錯誤，不開也行，開也行。)

7. ？Set up unit tests (Y/n) 敲n回車既可 ( 單元測試， 個人覺得不安裝選擇n )

8. ？Setup e2e tests with Nighwatch？(Y/n) ( e2e測試，個人覺得不安裝選擇n )

9. ？Should we run npm install for you after the project has been created？ (recommended) (use arrow Keys) 選使用npm

在項目夾的命令行：npm install（安裝依賴，以後就可以爲所欲爲的npm i xxx了）

XXXXVue文件夾中多出一個node_modules文件夾。

二.代碼內容（）

目錄：↑

1. dist是經過npm run build打包過後的文件，文件非常小。dist正常無法直接打開需要通過服務器，雲服務器也行，本地用phpstudy啥的也行。（後面打包的時候再提一下）
2. package.json和config：都是配置文件
3. assets:圖片呀，資源呀，這些都存放在這裏。
4. node_modules：npm後的資源，都在裏面，想要的ui庫直接npm i xxx庫。
5. src/components：組件存放處。先要啥組件（例：helloworld.vue），往這一放，就可以調用了
6. src/router：路由，
7. build：啓動打包文件。

三.運行(npm run dev)

先運行命令： npm run dev

加載，搞定！

四.封裝(npm run build)

dist是經過npm run build打包過後的文件，文件非常小。dist正常無法直接打開需要通過服務器，雲服務器也行，本地用phpstudy啥的也行。

也可以去封裝做成一個H5 app。使用雲打包即可。

五.成品

1. 通過放置在服務器，雲服務器也行，本地用phpstudy啥的也行。
2. 通過雲打包，變成一個app。
3. 其他的還沒接觸到。