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

  • 相关阅读:
    20200414:mysql原子性和持久性怎么保证
    20200417:说说redis的rdb原理。假设服务器的内存8g,redis父进程占用了6g,子进程fork父进程后,子父进程总共占用内存12g,如何解决内存不足的问题?(挖)
    [九省联考2018]秘密袭击coat
    CF1158F Density of subarrays
    忘情
    [IOI2018] meetings 会议
    [AGC013E] Placing Squares
    [八省联考2018]林克卡特树
    [NOI2016] 国王饮水记
    [十二省联考 2019]皮配
  • 原文地址:https://www.cnblogs.com/rhyheart/p/10069121.html
Copyright © 2011-2022 走看看