VueJS項目 - awesome-vue

vue-cli引用jquery, bootstrap, bootstrap-table

• 引用jquery
  找到vue-project/build/webpack.base.conf.js文件，在module.exports下添加plugins,
  需要在之前，引用webpack,

  var webpack = require('webpack');

  參考

  plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'),new webpack.ProvidePlugin({jQuery: "jquery",$: "jquery"})]

• 引用bootstrap
  在main.js中引用

  import ‘./assets/libs/bootstrap/css/bootstrap.min.css’
  import ‘./assets/libs/bootstrap/js/bootstrap.min’

  前提是你引用了jquery,不然會報錯

  import $ from ‘jquery’

• 引用bootstrap-table

  • 未實現，后期學習 vuetable-2

vue生成dist目錄不能運行

修改vue-project/config/index.js中的

module.exports = {build: {assetsPublicPath: './'}

vue snippet for sublime text

<snippet><content><![CDATA[ <template>${1} </template><script>export default {data () {return {}} } </script><style scoped></style> ]]></content><!-- Optional: Set a tabTrigger to define how to trigger the snippet --><tabTrigger>vue</tabTrigger><!-- Optional: Set a scope to limit where the snippet will trigger --><!-- <scope>Text.vue</scope> --> </snippet>

vue引用font-awesome

[font-awesome官網](http://fontawesome.io/icons/) 相關文件解析時會報錯，是否需要配置？ 可以通過vue-cli來引用[vue-awesome](https://www.npmjs.com/package/vue-awesome) ``` import Vue from 'vue'/* Pick one way between the 2 following ways */// only import the icons you use to reduce bundle size import 'vue-awesome/icons/flag'// or import all icons if you don't care about bundle size import 'vue-awesome/icons'/* Register component with one of 2 methods */import Icon from 'vue-awesome/components/Icon'// globally (in your main .js file) Vue.component('icon', Icon)// or locally (in your component file) export default {components: {Icon} } ``` 在html中使用 ``` <!-- basic --> <icon name="beer"></icon><!-- with options --> <icon name="refresh" scale="2" spin></icon> <icon name="comment" flip="horizontal"></icon> <icon name="code-fork" label="Forked Repository"></icon><!-- stacked icons --> <icon label="No Photos"><icon name="camera"></icon><icon name="ban" scale="2" class="alert"></icon> </icon> ```

link icon生成瀏覽器圖標

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

• vue-router生成路由
• vue下transition和javascript鉤子
  css類：
  v-enter， v-enter-active， v-leave， v-leave-active
  javascript鉤子

<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on:leave-cancelled="leaveCancelled" ><!-- ... --> </transition>

注意ES6風格的語法IE9不支持，以下是ES5語法：

methods: {// --------// 進入中// --------beforeEnter: function (el) {// ...},// 此回調函數是可選項的設置// 與 CSS 結合時使用enter: function (el, done) {// ...done()},afterEnter: function (el) {// ...},enterCancelled: function (el) {// ...},// --------// 離開時// --------beforeLeave: function (el) {// ...},// 此回調函數是可選項的設置// 與 CSS 結合時使用leave: function (el, done) {// ...done()},afterLeave: function (el) {// ...},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...} }

IE9對于ES6不兼容

箭頭函數不支持： () => {} 修改為： function() {}
省略函數字段不支持 created () {} 修改為： created: function(){}

vue-cli對于bootstrap-table適配性不好

v-for的item綁定到v-model會失效

<div id="editor"><input v-for="item in arr" v-model="item"/> </div> new Vue({el: '#editor',data: {input: '# hello',in1: '1',arr: ["in1", "in2", "in3", "in3"]} })

無法通過item的值對于元素的model進行控制

總結

以上是生活随笔為你收集整理的VueJS项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。