vue环境搭建

发布于 2020-04-02  208 次阅读


  1. 注意事项
    • 搭建vue环境前请先看webpack环境搭建
    • 我的根目录是:D:\web\webpack_demo\wp
  2. 在根目录下下载vue
    npm install vue -S
    
  3. 根目录下下载解析.vue文件的包
    npm install vue-loader -D
    npm install vue-template-compiler -D
    
  4. 在webpack.config.js文件里配置vue的解析器
    //在开头引入vue的插件包
    const VueLoaderPlugin = require('./node_modules/vue-loader/lib/plugin')
    
    //在plugins节点里创建实例
    plugins:[
        new VueLoaderPlugin()
    ],
    
    //写在rules匹配规则里
    {test:/\.vue$/i,use['vue-loader']},
    
  5. 在src文件夹里新建app.vue文件

    appvue.png

    • app.vue初始代码
      <template>
          <div>
              http://lqxzd.site
          </div>
      </template>
      <script>
      export default {
          data () {
          },
          methods: {},
          components: {},
      }
      </script>
      <style scoped>
      </style>
      
  6. 在主入口也就是main.js里面导入相关文件
    //main.js引入app.vue
    //然后把app.vue渲染到html中的id为app的div盒子中
    import VUE from 'vue'
    import APP from './app.vue'
    
    //从VUE里面定义一个vm的实例
    const vm = new VUE({
        //el表示被渲染盒子的id
        el:"#app",
        //render是一个方法,里面是一个匿名函数
        render:function(h){
            //形参h是一个函数
            h(APP)
        }
        //匿名函数转化为箭头函数
        render:h=>h(APP)
    });
    

没有肆意生长的野心,哪来梦想的星辰大海。