zoukankan      html  css  js  c++  java
  • 用脚手架构建及配置Vue2.0+ElementUI项目

    1、下载vscode --强大的前后端开发工具

    2、下载nodejs --前端代码打包编译专用

    3、下载git --强大的代码托管工具

    4、使用npm搭建项目

    1. 安装淘宝镜像(推荐国内线路,安装更加稳定,迅速)

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

    2. 安装vue 脚手架(当前最火的MVVM前端架构,国人精心打造,推荐使用)

    cnpm i -g vue-cli

    3. 安装webpack

    cnpm i -g webpack

    4. 创建webpack模板项目

    vue init webpack my-project

    5. 进入项目,安装相关依赖,运行项目

    cd my-project
    cnpm i
    cnpm run dev

    6. 安装element-ui(GitHub上最火vue开源项目,饿了么精心打造,推荐使用)

    cnpm i -S element-ui

    7. 在main.js中引入element-ui

    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    Vue.prototype.$ele = ElementUI

    8. 在HelloWorld.vue的mounted(挂载成功回调)方法中使用element ui

    mounted () {
        this.$ele.Message({
          message: '恭喜你,这是一条成功消息!',
          type: 'success'
        })
      }

     5、Demo项目GitHub地址

    https://github.com/Rhyheart/rhyheart.web.demo.git

     6、npm常用指令说明

    1. npm install

    安装node_module以及还原package.json内声明的所有包

    2. npm install xxxpackage

    安装xxx包到node_module目录下,但是不会更新package.json文件,因此另外一个人拉取到代码后无法使用npm install进行包还原,需要手动指定重装

    3. npm install --save xxxpackage

    安装xxx包到node_module目录下,同时更新package.jsondependencies(生产/运行环境)配置,运行时如果需要就用这个

    4. npm install --save-dev xxxpackage

    安装xxx包到node_module目录下,同时更新package.jsondevDependencies(开发/编译环境),但是不会更新dependencies(生产/运行环境)配置,仅编译时需要就用这个

    5. npm install --global xxxpackage

    安装xxx包到全局,不同项目之间可以共享该包,就无需每个项目都安装

    6. 简写

    install可以简写为i,例如:npm install 简写 npm i

    --save可以简写为-S,例如:npm install --save xxxpackage 简写为 npm i -S xxxpackage

    --save-dev可以简写为-D,例如:npm install --save-dev xxxpackage 简写为 npm i -D xxxpackage

     --global可以简写为-g,例如:npm install --global xxxpackage 简写为 npm i -g xxxpackage

  • 相关阅读:
    Python——GUI编程 控件及常用信号
    Python——PYQT:控件基本使用
    Android 自己定义圆圈进度并显示百分比例控件(纯代码实现)
    Parallel and Perpendicular
    策略模式(Strategy Pattern)
    Linux Framebuffer驱动剖析之中的一个—软件需求
    Java知识总结---整合SpringMVC+Mybatis+Spring(二)
    wav音频文件头解析
    【EasyUi DataGrid】批量删除
    Spark SQL Catalyst源代码分析之UDF
  • 原文地址:https://www.cnblogs.com/rhyheart/p/10069121.html
Copyright © 2011-2022 走看看