使用淘宝镜像cnpm安装Vue.js的图文教程

前言

Vue.js是一个流行的前端MVVM框架。要使用它，我们必须提前配置它。其中一种安装方式是npm，更适合大规模应用。今天，让我们来看看这个方法是如何工作的。由于npm是国外的，使用起来比较慢，所以我们用淘宝的cnpm镜像来安装vue。

步骤

首先我们需要下载npm，因为我已经提前安装了node.js，并且在安装包中集成了npm，然后我们可以使用npm命令从获取淘宝镜像的cnpm。

1.打开命令行窗口并输入

npminstall-gcnpm-registry=https://registry.npm.taobao.org获得cnpm后，我们需要升级它并输入以下命令

Cnpm安装cnpm -g因为安装Vue需要npm版本大于3.0.0，我们需要升级。

然后我们输入以下命令来安装vue

Cnpm安装vue，然后安装vue-cli

Cnpm install-globalvue-CLI，此时已设置好环境。

2.接下来，我们需要指定一个目录来存储我们的项目。你可以选择任何路径。确定路径后，输入以下命令

Vue init webpack“项目名称”3。成功后，我们进入项目所在的目录

Cd '项目所在文件夹'

然后依次输入以下命令

安装cnpm运行开发

成功后，我们进入浏览器，输入localhost:8080，显示如下页面

项目目录

接下来，让我们看看上面成功创建的项目，并进入项目目录

我们开发的目录包含src中的以下目录

Assets:储存突变

组件：存储组件文件

App.vue:项目入口文件，我们也可以直接在这里编写构建，而不是使用组件目录

Main.js:项目核心文件

我们来看看App.vue的内容

模板div id='app' img src='http:/assets/logo . png ' router-view/router-view/div/templatescript export default { name : ' app ' }/script style # app { font-family : ' Avenir '，Helvetica，Arial，sans-serif；-web kit-font-smooth :抗锯齿；-moz-OSX-font-smooth :灰度；文本对齐：中心；color : # 2c 3e 50；边距-top : 60px；}/styleHello.vue

模板div class=' hello ' h1 { { msg } }/h1 H2 essential Links/H2 ul lia href=' https://vuejs . org ' rel=' external nofollow ' target=' _ blank ' core Docs/a/Li lia href=' https://forum . vuejs . org ' rel=' external nofollow ' target=' _ blank ' forum/a/Li lia href=' https://gitter . im/vuejs/vue ' rel=' external nofollow ' target=' '-添加“scoped”属性以将CSS限制为此组件-样式scopedh1，H2 { font-weight : normal；} ul { list-style-type : none；padd : 0；}li { display:内联块；margin: 0 10px} a { color: # 42b983}/style以上使用淘宝镜像cnpm安装Vue.js的图文教程都是边肖分享的内容。希望能给大家一个参考，支持我们。