zoukankan      html  css  js  c++  java
  • No.1一步步学习vuejs 环境配置安装篇

    一 安装与配置

    需要安装node.js和 nmp管理器
    http://nodejs.cn/
    安装完后测试输入命令查看版本验证

    node -v //查看node.js的版本
    npm -v //查看

    由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm

    1. Cmd命令行中输入
      npm install -g cnpm --registry=http://registry.npm.taobao.org

    5.安装vue-cli脚手架构建工具

    输入命令 

    npm install -g vue-cli

    在VueJs目录下,运行命令vue init webpack firstVue。其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。

    1. cd到我们的项目文件夹firstVue中,运行命令cnpm install 安装包,(注意:我们已经使用淘宝镜像cnpm)
      1. 安装完之后,我们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源
        进入项目,安装并运行:
        $ cd my-project
        $ cnpm install
        $cnpm run dev
        

          


        DONE Compiled successfully in 4388ms

        Listening at http://localhost:8080

    访问 localhost:8080





    测试模板

    <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
        </head>
        <body>
        <div id="app">
          <p>{{ message }}</p>
        </div>
        
        <script>
        new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue.js!'
          }
        })
        </script>
        </body>
        </html>
  • 相关阅读:
    创建文件夹 文件File操作方法
    C#WinForm4张纸牌窗体设计
    b/s结构和c/s结构
    sql 中 时间只显示日期
    视图
    js获取字符串的字节数
    触发器
    将xml字符串转换成dataset
    sql 集合查询 数据更新操作语句
    带有ANY(SOME)或ALL谓词的字查询
  • 原文地址:https://www.cnblogs.com/arsense/p/8427293.html
Copyright © 2011-2022 走看看