Vue 简单实例起步

布满荆棘的人生 2021-12-10 01:49 387阅读 0赞

安装node.js

去官网下载一个最新版本的Node.js并安装，主要目的是使用集成在node中的npm。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQzMzE2_size_16_color_FFFFFF_t_70

对npm进行升级并替换成淘宝镜像

使用npm -g install npm命令，将npm升级到最新版本

2019071510375537.png

使用npm install -g cnpm —registry=https://registry.npm.taobao.org ，使用国内的淘宝镜像，将默认的npm替换为cnpm命令（国内的加载速度更快，并且可以避免资源限制）

20190715104117630.png

使用cnpm命令安装Vue-cli脚手架

使用cnpm install -g vue-cli命令安装vue-cli脚手架

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQzMzE2_size_16_color_FFFFFF_t_70 1

建立Vue项目

使用cd命令切换目录到你要新建Vue的位置

20190715104747556.png

然后使用vue init webpack myfirstvue命令新建新的Vue项目

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQzMzE2_size_16_color_FFFFFF_t_70 2

运行一下写好的项目吧

使用cd 命令切换到你的项目根目录下，然后使用 npm run dev命令运行我们的第一个Vue程序

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQzMzE2_size_16_color_FFFFFF_t_70 3

20190715112118626.png

浏览器访问localhost:8080查看我们的第一个页面。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjQzMzE2_size_16_color_FFFFFF_t_70 4

发表评论

表情：
评论列表 （有 0 条评论，387人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue.js起步

    在我们的第一章有提到过我的第一个示例， > 1. `<div id="app">` > 2. `{ { message }}` > 3. `</div>` > 1.

    清疚清疚/ 0 赞/ 118 阅读

    相关 Vue起步

    Vue起步 1.Vue.js是什么 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注

    比眉伴天荒比眉伴天荒/ 0 赞/ 110 阅读

    相关 Vue.js起步

    Vue.js起步 在我们的第一章有提到过我的第一个示例， 我们这章节主要讲如何在npm初始化的项目中创建一个模块。 创建一个模块MyTemplate.vue

    朱雀朱雀/ 0 赞/ 1626 阅读