前言
Vue.js是前端一個(gè)比較火的MVVM框架,要使用它,我們必須提前配置,其中有一種安裝方式是使用npm,比較適合比較大型的應(yīng)用。今天就來(lái)看看這種方式如何操作,由于npm是國(guó)外的,使用起來(lái)比較慢,我們這里使用淘寶的cnpm鏡像來(lái)安裝vue.
步驟
首先我們需要下載npm,因?yàn)槲乙呀?jīng)提前安裝了node.js,安裝包里面集成了npm,然后我們就可以利用npm命令從獲取淘寶鏡像的cnpm了。
1.打開命令行窗口,輸入
npm install -g cnpm --registry=https://registry.npm.taobao.org
獲取到cnpm以后,我們需要升級(jí)一下,輸入下面的命令
cnpm install cnpm -g
因?yàn)榘惭bVue需要npm的版本大于3.0.0,所以我們要升級(jí)一下,
然后我們輸入下面的命令,安裝vue
cnpm install vue
接下來(lái)安裝vue-cli
cnpm install --global vue-cli
此時(shí)環(huán)境就搭建好了。
2.接下來(lái)我們需要指定一個(gè)目錄存放我們的項(xiàng)目,可以選擇任意路徑,確定好路徑后輸入下面的命令
vue init webpack "項(xiàng)目名稱"
3.成功以后,我們進(jìn)入項(xiàng)目所在目錄
cd "項(xiàng)目所在文件夾"
然后依次輸入下面的命令
cnpm install cnpm run dev
成功后我們進(jìn)入瀏覽器,輸入localhost:8080會(huì)展示下面的頁(yè)面
項(xiàng)目目錄
接下來(lái)我們看看上面成功創(chuàng)建的項(xiàng)目,進(jìn)入項(xiàng)目目錄
我們開發(fā)的目錄是在src,src中包含下面的目錄
assets:存放突變
components:存放一個(gè)組件文件
App.vue:項(xiàng)目入口文件,我們也可以直接將組建寫這里,而不使用 components 目錄
main.js:項(xiàng)目核心文件
我們看看App.vue的內(nèi)容
<template> <p id="app"> <img src="./assets/logo.png"> <router-view></router-view> </p> </template> <script> export default { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Hello.vue
<template> <p class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li><a href="https://vuejs.org" rel="external nofollow" target="_blank">Core Docs</a></li> <li><a href="https://forum.vuejs.org" rel="external nofollow" target="_blank">Forum</a></li> <li><a href="https://gitter.im/vuejs/vue" rel="external nofollow" target="_blank">Gitter Chat</a></li> <li><a href="https://twitter.com/vuejs" rel="external nofollow" target="_blank">Twitter</a></li> <br> <li><a href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" target="_blank">Docs for This Template</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href="http://router.vuejs.org/" rel="external nofollow" target="_blank">vue-router</a></li> <li><a href="http://vuex.vuejs.org/" rel="external nofollow" target="_blank">vuex</a></li> <li><a href="http://vue-loader.vuejs.org/" rel="external nofollow" target="_blank">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" rel="external nofollow" target="_blank">awesome-vue</a></li> </ul> </p> </template> <script> export default { name: 'hello', data () { return { msg: 'Welcome to 菜鳥教程' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
相信看了本文案例你已經(jīng)掌握了方法,更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章!
推薦閱讀:
怎樣使用ES6模版字符串
如何使用npm安裝全局模塊權(quán)限
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com