使用淘宝镜像cnpm安装Vue.js的图文教程
作者: / 2019-12-09 / 浏览次数:

前语

vue.js是前端一个比较火的mvvm结构,要运用它,咱们有必要提早装备,其中有一种装置方法是运用npm,比较合适比较大型的运用。今日就来看看这种方法怎么操作,由于npm是国外的,运用起来比较慢,咱们这儿运用淘宝的cnpm镜像来装置vue.

过程

首要咱们需求下载npm,由于我现已提早装置了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-c凯发体育下载li

cnpm install --global vue-cli

此刻环境就建立好了。

2.接下来咱们需求指定一个目录寄存咱们的项目,能够挑选恣意途径,确定好途径后输入下面的指令

vue init webpack "项目名称"

3.成功今后,咱们进入项目地点目录

cd "项目地点文件夹"

然后顺次输入下面的指令

cnpm install 
cnpm run dev

成功后咱们进入浏览器,输入localhost:8080会展现下面的页面

项目目录

接下来咱们看看上面成功创立的项目,进入项目目录

咱们开发的目录是在src,src中包括下面的目录

assets:寄存骤变

components:寄存一个组件文件

app.vue:项目进口文件,咱们也能够直接将组成写这儿,而不运用 components 目录

main.js:项目中心文件

咱们看看app.vue的内容

 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 
 h1 {{ msg }} /h1 
 h2 essential links /h2 
 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 
 li a href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" target="_blank" docs for this template /a /li 
 /ul 
 h2 ecosystem /h2 
 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 
 /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;
 list-style-type: none;
 padding: 0;
 display: inline-block;
 margin: 0 10px;
 color: #42b983;
 /style 

以上这篇运用淘宝镜像cnpm装置vue.js的图文教程便是小编共享给我们的全部内容了,期望能给我们一个参阅,也期望我们多多支撑萬仟网。

【某某业务】网站建设、网站设计、服务器空间租售、网站维护、网站托管、网站优化、百度推广、自媒体营销、微信公众号
如有意向---联系我们
热门栏目
热门资讯

网站建设 网站托管 成功案例 新闻动态 关于我们 联系我们 服务器空间 加盟合作 网站优化

备案号: 

公司地址:江苏省南京市玄武区玄武湖 咨询QQ:9490489 手机: 电话: