實戰Vue簡易項目（1）初始化環境配置

本章如下命令都是在cmd命令行中進行的。

安裝命令行

npm i -g vue-cli

安裝完成後，輸入vue -V返回版本號，即安裝成功；

初始化項目

切換到項目目錄下

項目目錄，即項目所在目錄。

目前，咱們尚未建立項目，進入 預期項目目錄 的上一級文件目錄下便可。

本文以我的電腦目錄演習cd /d e:/tutors/，請自動對應本身的學習所用路徑。

使用腳手架初始化項目

vue init webpack vue最後一個vue爲項目名稱，能夠自定義其它名稱：vue init webpack aaa。

初始化過程會爲您定製初始化環境,如下是個人定製：

? Project name vue  //項目名稱
? Project description A Vue.js project //項目描述
? Author //做者
? Vue build standalone
? Install vue-router? Yes  //是否須要vue-router
? Use ESLint to lint your code? No  //是否須要ESLint進行代碼風格檢測
? Set up unit tests No  //是否須要單元測試
? Setup e2e tests with Nightwatch? No  //是否須要端到端測試；
? Should we run `npm install` for you after the project has been created? (recommended) npm  //選擇安裝項目依賴的工具

操做都是yes || no，而後回車。
固然，默認選擇yes，沒必要輸入，直接回車。
選擇no的話，須要輸入，而後回車。

初始化完成的結果以下：

初始化項目結構

dir vue查看初始化項目目錄結構：

e:\tutors>dir vue
 驅動器 E 中的卷是 文檔
 卷的序列號是 B4A1-7185

 e:\tutors\vue 的目錄

2018/07/29  09:32    <DIR>          .
2018/07/29  09:32    <DIR>          ..
2018/07/29  09:31               230 .babelrc  //babel配置文件
2018/07/29  09:31               147 .editorconfig  //編輯器配置文件
2018/07/29  09:31               154 .gitignore  //Git管理忽略文件配置
2018/07/29  09:31               246 .postcssrc.js  //postcss配置文件
2018/07/29  09:31    <DIR>          build  //生產、開發環境配置產出文件；
2018/07/29  09:31    <DIR>          config  // 生產、開發環境配置基礎文件；
2018/07/29  09:31               265 index.html  //HTML模板；
2018/07/29  09:32    <DIR>          node_modules  //NPM依賴包；
2018/07/29  09:32           371,973 package-lock.json  //項目依賴版本等信息文件
2018/07/29  09:31             1,733 package.json  //項目依賴配置文件；
2018/07/29  09:31               460 README.md  //Markdown說明文檔；
2018/07/29  09:31    <DIR>          src  //項目源文件（開發所在）
2018/07/29  09:31    <DIR>          static  //我沒用該文件...
               8 個文件        375,208 字節
               7 個目錄 32,987,131,904 可用字節

運行項目

cd vue切換到本身的項目目錄下，npm run dev能夠將該初始化項目運行在開發環境下。

運行結果以下：

章節回顧

• 初始化項目所須要的依賴有哪些？
• 如何初始化項目？
• 如何運行項目，爲何能夠這樣簡便的運行？

思考

• 若是使用CSS預處理，須要作什麼，仍是什麼都不須要作就能夠呢？
• 若是想在局域網其它端訪問，須要作什麼，仍是什麼都不須要作就能夠呢？