Vue的使用

我们在安装成功VUE之后，就会面临如何使用Vue

1. Vue如何引入外部的css的文件(如果我们不安装css-loader和style-loader直接使用@import引入的css文件，会报错)

   1.将你的css文件放在static文件夹下面

   2.在根目录的命令行里面执行: npm install css-loader --save-dev

                                                       npm install style-loader --save-dev

   3.在.vue的文件里面，在style标签里面利用@import命令引入你所需要的css文件

  

<style scoped>
  @import '../static/css/index.css';
</style>

　最后执行 npm run dev命令即可。

   

 2.我们在前期不太熟悉vue的或者其他的js的语法的时候，仍然希望可以使用jquery，在vue中安装并使用jquery

      1.使用命令行工具     npm install jquery@1.11.3 --save-dev

      注：如果想查看npm上jquery有哪些版本，可以执行命令：

                                      npm view jquery versions

     2. 配置jquery   

          将jquery以插件打包，需要为webpack的plugins进行插件设置。

          在build/webpack.base.conf.js文件中，在整个配置对象的末尾增加plugins配置。

         

 //在开头引入
  var webpack = require('webpack')

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ]

　　3. 在.eslintr.js中增加一个配置项

      

env: {
    browser: true,
    jquery: true //增加的配置项
  },

　 4. 在main.js中引用jquery，在vue文件中使用jquery

    main.js文件

    

   App.vue文件

   

结果：

3. 规避es6的eslint的语法检查

  在使用vue的过程当中，我们经常会遇到eslint的严格的语法检查，比如说空格空几个之类的，我们可以把一些语法检查给规避掉

  1. 在eslintr.js的rule的位置，增加一些配置项即可。

  例如

  

 

 注： 具体的eslint的语法的配置的配置项，在eslint语法配置的文章中