vue cli搭建项目及文件引入

cli搭建方法:需安装nodejs先css

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

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

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

   四、cd ProjectName //打开新建立的文件夹webpack

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

   六、npm run dev   // 运行项目,vuex

  引入文件:vue-cli

    全部文件引入,均可以放在index.html中按常规方式引入。npm

    引入 element-ui: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的内容,还有一大堆原型方法。

相关文章
相关标签/搜索