使用淘寶鏡像cnpm安裝Vue.js的圖文教程

更新時間：2018年05月17日 09:38:36 作者：lxn_李小牛

今天小編就為大家分享一篇使用淘寶鏡像cnpm安裝Vue.js的圖文教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

前言

Vue.js是前端一個比較火的MVVM框架，要使用它，我們必須提前配置，其中有一種安裝方式是使用npm，比較適合比較大型的應(yīng)用。今天就來看看這種方式如何操作，由于npm是國外的，使用起來比較慢，我們這里使用淘寶的cnpm鏡像來安裝vue.

步驟

首先我們需要下載npm，因為我已經(jīng)提前安裝了node.js,安裝包里面集成了npm，然后我們就可以利用npm命令從獲取淘寶鏡像的cnpm了。

1.打開命令行窗口，輸入

npm install -g cnpm --registry=https://registry.npm.taobao.org

獲取到cnpm以后，我們需要升級一下，輸入下面的命令

cnpm install cnpm -g

因為安裝Vue需要npm的版本大于3.0.0，所以我們要升級一下，

然后我們輸入下面的命令，安裝vue

cnpm install vue

接下來安裝vue-cli

cnpm install --global vue-cli

此時環(huán)境就搭建好了。

2.接下來我們需要指定一個目錄存放我們的項目，可以選擇任意路徑，確定好路徑后輸入下面的命令

vue init webpack "項目名稱"

3.成功以后，我們進(jìn)入項目所在目錄

cd "項目所在文件夾"

然后依次輸入下面的命令

cnpm install 
cnpm run dev

成功后我們進(jìn)入瀏覽器，輸入localhost:8080會展示下面的頁面

項目目錄

接下來我們看看上面成功創(chuàng)建的項目，進(jìn)入項目目錄

我們開發(fā)的目錄是在src,src中包含下面的目錄

assets:存放突變

components:存放一個組件文件

App.vue:項目入口文件，我們也可以直接將組建寫這里，而不使用 components 目錄

main.js:項目核心文件

我們看看App.vue的內(nèi)容

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <router-view></router-view>
 </div>
</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>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h2>Essential Links</h2>
 <ul>
  <li><a  rel="external nofollow" target="_blank">Core Docs</a></li>
  <li><a  rel="external nofollow" target="_blank">Forum</a></li>
  <li><a  rel="external nofollow" target="_blank">Gitter Chat</a></li>
  <li><a  rel="external nofollow" target="_blank">Twitter</a></li>
  <br>
  <li><a  rel="external nofollow" target="_blank">Docs for This Template</a></li>
 </ul>
 <h2>Ecosystem</h2>
 <ul>
  <li><a  rel="external nofollow" target="_blank">vue-router</a></li>
  <li><a  rel="external nofollow" target="_blank">vuex</a></li>
  <li><a  rel="external nofollow" target="_blank">vue-loader</a></li>
  <li><a  rel="external nofollow" target="_blank">awesome-vue</a></li>
 </ul>
 </div>
</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>

以上這篇使用淘寶鏡像cnpm安裝Vue.js的圖文教程就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: