How to install Vue.js using Taobao mirror cnpm

This time I will show you how to use Taobao image cnpm to install Vue.js, and what are the precautions for using Taobao image cnpm to install Vue.js. Here is a practical case, let's take a look.

Preface

Vue.js is a popular MVVM framework on the front end. To use it, we must configure it in advance. There is one installation method The method is to use npm, which is more suitable for larger applications. Today let’s take a look at how to operate this method. Since npm is foreign and is relatively slow to use, we use Taobao’s cnpm image to install vue.

Steps

First we need to download npm, because I have installed node.js in advance, and npm is integrated in the installation package. Then we can use the npm command to obtain the cnpm of the Taobao image.

1. Open the command line window and enter

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

After obtaining cnpm, we need to upgrade it and enter the following command

cnpm install cnpm -g

Because installing Vue requires npm version to be greater than 3.0.0, we need to upgrade it.

Then we enter the following command to install vue

cnpm install vue

Next install vue-cli

cnpm install --global vue-cli

The environment is now set up.

2. Next we need to specify a directory to store our project. You can choose any path. After determining the path, enter the following command

vue init webpack "项目名称"

3. After success, we enter the directory where the project is located

cd "The folder where the project is located"

Then enter the following commands in sequence

cnpm install 
cnpm run dev

After success, we enter the browser and enter localhost:8080 to display the following page

project Directory

Next let’s take a look at the successfully created project above and enter the project directory

The directory we developed is in src, src contains the following directories

assets: stores mutations

components: stores a component file

App.vue: ProjectEntry file, we can also write the components here directly instead of using the components directory

main.js: Project core file

##We Take a look at the content of App.vue

<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>

I believe you have mastered the method after reading the case in this article, and there are more exciting things Please pay attention to other related articles on php Chinese website!

Recommended reading:

How to use ES6 template string

How to use npm to install global module permissions

The above is the detailed content of How to install Vue.js using Taobao mirror cnpm. For more information, please follow other related articles on the PHP Chinese website!