zoukankan      html  css  js  c++  java
  • vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先

       1、npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些

       2、cnpm i -g vue-cli   //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用。

       3、vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,projectName:项目名字,随意写,它会创建一个ProjectName的文件夹,作为根目录

       4、cd ProjectName //打开新创建的文件夹

       5、cnpm install   //在跟目录中安装依赖。

       6、npm run dev   // 运行项目,

      引入文件:

        所有文件引入,都可以放在index.html中按常规方式引入。

        引入 element-ui:

          npm i element-ui -D       安装element-ui模块
          cnpm i style-loader -D        配置style-loader 。这个在package.json中,新的文件没有配置,一定要安装loader。
          import 'element-ui/lib/theme-default/index.css'      引入css
          import ElementUi from 'element-ui'            引入ui模块
          Vue.use(ElementUi)                    使用引入ui模块。
          webpack.config.js                    到官网复制配置代码,放入webpack.config.js中。

        引入stylus:

          cnpm i stylus stylus-loader -D     安装stylus 模块和stylus-loader配置。
          webpack.config.js中添加 { test: /.styl$/, loader: 'style-loader!css-loader!stylus-loader' }

        引入vuex:

          cnpm i vuex -D           安装vuex

          import Vuex from 'vuex'      直接引入模块

          Vue.use(Vuex)            使用模块
          export default new Vuex.Store({})  一般store.js文件输出

        引入animate.css
        cnpm i animate.css --save            安装animate.css
        import animate from 'animate.css          在vue文件中使用

    import 引入

      import aaa from './xxx.vue'  vue文件引入后得到一个组件以及xxx.vue中export default的内容。如果vue文件中:export default{data(){return{t1:'1'}}},则能够用aaa.data().t1获取到1。

      import aaa from ‘./xxx.js’  aaa得到js文件文件中export defualt的内容,还有一大堆原型方法。

  • 相关阅读:
    MySQL日期函数与日期转换格式化函数大全
    外设驱动库开发笔记19:BMP280压力温度传感器驱动
    外设驱动库开发笔记18:MS5837压力变送器驱动
    通讯接口应用笔记1:RS485通讯上下拉电阻的选择
    外设驱动库开发笔记17:MS5803压力变送器驱动
    外设驱动库开发笔记16:MS5536C压力变送器驱动
    Elasticserach学习笔记之Elasticsearch查询慢和集群慢查询日志配置
    Linux学习笔记之curl模拟get/post/delete/put请求
    ELK学习笔记之elasticsearch中 refresh 和flush区别
    Prometheus学习笔记之Prometheus是如何定义告警级别的
  • 原文地址:https://www.cnblogs.com/gsgs/p/6725609.html
Copyright © 2011-2022 走看看