我們可以在 Vue.js 的官網(wǎng)上直接下載 vue.min.js 并用?<script>?標(biāo)簽引入检号。
以下推薦國外比較穩(wěn)定的兩個 CDN剔桨,國內(nèi)還沒發(fā)現(xiàn)哪一家比較好娱挨,目前還是建議下載到本地邦危。
Staticfile CDN(國內(nèi))?:?https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg?:https://unpkg.com/vue@2.6.14/dist/vue.min.js。
cdnjs?:?https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
{{ message }}
{{ message }}
{{ message }}
由于 npm 安裝速度慢坦敌,本教程使用了淘寶的鏡像及其命令 cnpm,安裝使用介紹參照:使用淘寶 NPM 鏡像。
npm 版本需要大于 3.0狱窘,如果低于此版本需要升級它:
# 查看版本$ npm -v2.3.0#升級 npmcnpm install npm -g# 升級或安裝 cnpmnpm install cnpm -g
在用 Vue.js 構(gòu)建大型應(yīng)用時推薦使用 cnpm 安裝:
# 最新穩(wěn)定版$ cnpm install vue
Vue.js 提供一個官方命令行工具杜顺,可用于快速搭建大型單頁應(yīng)用。
# 全局安裝 vue-cli$ cnpm install --globalvue-cli# 創(chuàng)建一個基于 webpack 模板的新項目$ vueinitwebpack my-project# 這里需要進(jìn)行一些配置蘸炸,默認(rèn)回車即可This will install Vue2.x version of the template.For Vue1.x use: vueinitwebpack#1.0 my-project? Project name my-project? Project description A Vue.js project? Author kxdang ? Vue build standalone? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Setup unit testswithKarma + Mocha? Yes? Setup e2e testswithNightwatch? Yes? vue-cli · Generated"my-project".? Togetstarted:? ? ? ? cd my-project? ? npm install? ? npm run dev? ? ? Documentation can be found at https://vuejs-templates.github.io/webpack
進(jìn)入項目躬络,安裝并運行:
$ cdmy-project$ cnpm install$ cnpm run devDONE? Compiled successfully in 4388ms> Listening at http://localhost:8080
成功執(zhí)行以上命令后訪問 http://localhost:8080/,輸出結(jié)果如下所示:
**注意:**Vue.js 不支持 IE8 及其以下 IE 版本搭儒。
打包 Vue 項目使用以下命令:
npm run build
執(zhí)行完成后洗鸵,會在 Vue 項目下生成一個?dist?目錄,一般包含 index.html 文件及 static 目錄仗嗦,static 目錄包含了靜態(tài)文件 js、css 以及圖片目錄 images甘凭。
如果直接雙擊 index.html 打開瀏覽器稀拐,頁面可能是空白了,想要修改下 index.html 文件中 js丹弱、css 路徑即可德撬。
例如我們打開 dist/index.html 文件看到路徑是絕對路徑:
我們把 js、css 路徑路徑修改為相對路徑:
這樣直接雙擊 dist/index.html 文件就可以在瀏覽器中看到效果了躲胳。