使用vue-CLI构建vue工程项目
vue2是對新手很友好的MVVM框架，有完善的官方中文文檔，閱讀起來也非常容易理解，由淺入深，示例完整。同時官方也提供了一個開箱即用的 vue-cli 幫我們生成一個完整的項目框架。
vue.js 著名的全家桶系列, 包含了， vue-router, vuex， axios，再加上 vue-cli 就是一個從 路由，數據流管理，http請求都有的核心項目，vue 社區的豐富資源，也是滿足了我們日常開發中的需求了。
vue-cli 這個構建工具大大降低了 webpack 的使用難度，開箱即用的特性，大大降低了我們的學習成本，加快了我們的開發速度。
在使用vue-cli之前，請確認你的電腦已經安裝了 node，建議版本在 8.0.0 以上
如果需要使用 nvm 這個 node 版本管理器，可以參考我的另一篇文章 nvm 的安裝
安裝 vue-cli (這里我們確認已安裝過node)
-
使用 npm（不知道npm的同學，可以自行百度，或者看我上面 nvm的安裝教程 ） 全局安裝 webpack，打開命令行工具輸入：npm install webpack -g，安裝完成之后輸入 webpack -v，如果出現相應的版本號，則說明安裝成功。
-
注意：webpack 4.X 開始，需要安裝 webpack-cli 依賴 ,所以使用這條命令 npm install webpack webpack-cli -g
全局安裝 vue-cli
-
在命令行中輸入 npm install -g vue-cli
-
安裝完成后，檢驗是否安裝成功，輸入 vue-V (注意：這里是大寫的 “V”)，如果出現版本號，則說明安裝成功。
PS D:\Notes> vue -V 3.0.5 -
打開 node 的安裝目錄，也可以看到我們全局安裝的 vue-cli
用 vue-cli 來構建項目。
-
首先，在D盤新建一個文件夾作為項目的存放地，然后cd到目錄下，輸入命令，創建項目
vue init webpack vue-demo -
等待模板下載成功后，會有一個交互式的選項讓你選擇：
? Project name vue-demo # 項目名稱，直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫 ，可以參考一下。 ? Project description A Vue.js project # 項目描述,隨便寫 ? Author # 作者名稱 ? Vue build standalone # 我選擇的運行加編譯時Runtime + Compiler: recommended for most users ? Install vue-router? Yes # 是否需要 vue-router，路由肯定要的 ? Use ESLint to lint your code? Yes # 是否使用 ESLint 作為代碼規范. ? Pick an ESLint preset Standard # 一樣的ESlint 相關 ? Set up unit tests Yes # 是否安裝單元測試 ? Pick a test runner 按需選擇 # 測試模塊 ? Setup e2e tests with Nightwatch? 安裝選擇 # e2e 測試 ? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我選的NPM
-
安裝完成后，安裝提示，cd 到項目目錄, 執行命令 npm install 進行初始化。
# Project initialization finished! # ======================== To get started:
cd vue-demo
npm run dev-
如果安裝速度太慢。可以把 npm 的安裝源指向 淘寶鏡像，這里就不贅述了。
-
啟動項目
npm run dev DONE Compiled successfully in 4014ms
I Your application is running here: http://localhost:8080
-
如果瀏覽器打開之后，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js 的 post
module.exports = {dev: { <span class="token comment">// Paths</span> assetsSubDirectory<span class="token punctuation">:</span> <span class="token string">'static'</span><span class="token punctuation">,</span> assetsPublicPath<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> proxyTable<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 這里可以配置跨域</span><span class="token comment">// Various Dev Server settings</span> host<span class="token punctuation">:</span> <span class="token string">'localhost'</span><span class="token punctuation">,</span> <span class="token comment">// can be overwritten by process.env.HOST</span> port<span class="token punctuation">:</span> <span class="token number">8080</span><span class="token punctuation">,</span> <span class="token comment">// 端口 就是改這里</span> autoOpenBrowser<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 這里是ture的話，就會自動打開瀏覽器</span>
-
-
我的端口沒有被占用，所以直接啟動成功，打開 http://localhost:8080 就能看到歡迎頁面。
-
vue-cli 的 webpack 配置分析
-
從 package.json 可以看到 開發 和 生產 環境的入口。
"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","test": "npm run unit","lint": "eslint --ext .js,.vue src test/unit","build": "node build/build.js"},- dev 就是開發環境的啟動命令
- build 是生產打包環境的命令
- lint 是ESLint的檢查命令 在 --ext 前加一個 --fix 可以自動修復不符合規范的代碼
-
-
打包上線
- 運行 npm run build 命令，就可以進行打包工作了，打包完成后，會生成 dist 目錄，項目上線時，把dist 目錄下的文件放到服務器就可以了。
-
調試工具 vue-tool
- 點擊查看我的這篇博客分享
另：
1.npm 開啟了npm run dev以后怎么退出或關閉？ctrl+c2.--save-dev自動把模塊和版本號添加到模塊配置文件package.json中的依賴里devdependencies部分3. --save-dev 與 --save 的區別--save 安裝包信息將加入到dependencies（生產階段的依賴）--save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），所以開發階段一般使用它轉載自： https://blog.csdn.net/wulala_hei/article/details/85000530
總結
以上是生活随笔為你收集整理的使用vue-CLI构建vue工程项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PMP读书笔记(第11章)
- 下一篇： vue报错：error Strings