欢迎光临
我们一直在努力

Vue2.0构建——踩过的坑

vue.js 初步学习

传说中的vue 全家桶 :vue + vue-router + vuex

1、构建新项目(基于webpack 3.8.1,前提安装node环境)

$ npm install --global vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

注意:进行项目创建和初始化之后是没有一些依赖包的,目录中的node_moduless文件夹是没有的,这个时候我们就要进入项目的目录下,使用”npm install”来初始化依赖包,初始化需要的包都在package.json里面设置好了。

2、vue-loader

vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。如果要想在vue项目中使用scss,要告诉vue-loader怎么样解析我的scss文件。

在webpack中,所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack loader处理组件中的代码,然后它根据lang属性自动判断出要使用的loaders。 因为在新版本的vue-cli已经帮我们把sass-loader配置好了,放在了util.js里面。 所以无需在webpack.base.config.js对scss进行配置,只要安装处理sass/scss的loader,就能在vue中使用scss了。

(1)、Vue对scss的依赖

①、首先安装依赖

$ npm install node-sass --save-dev
$ npm install sass-loader --save-dev

②、在需要用到scss的地方标注:

<style lang="scss"> </style>

3、配置文件

(1)、解释一下webpack.base.config.js,webpack.base.conf.js是一个基础的的环境配置文件,里面包含各个环境(包括开发环境,生产环境,测试环境)都需要的配置,即公用部分。比如说入口文件和输出文件这类,然后开发环境的webpack.dev.conf.js中开头位置有这么一句:
const devWebpackConfig = merge(baseWebpackConfig, // 将 webpack.dev.conf.js 的配置和 webpack.base.conf.js 的配置进行合并,这样重复的配置代码就不用写两次了。

(2)、使用两个独立的Webpack配置文件,一个用于开发(webpack.dev.conf.js),另一个用于生产(webpack.prod.conf.js),共用的配置部分放在webpack.base.conf.js中。

(3)、在build/build.js文件中定义变量:process.env.NODE_ENV = ‘production'(在使用webpack和vue-cli构建的项目中,Vue会根据 process.env.NODE_ENV 决定是否启用生产环境模式,默认为开发模式)

4、项目结构
(1)、整体项目目录

--build   
--config  
--dist   //npm run build 之后再生成的目录
--src  
  --components   // 存放组件
  --page    //页面组件,由vue-router引入
  --router  //路由
  --store   // 数据流管理
  main.js   //入口文件
  app.vue   //主组件 
--static   //静态文件目录
.babelrc    
.gitignore  //git忽略上传文件
index.html  //静态文件入口
package.json  //配置文件

(2)、main.js文件

import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;
//开启debug模式
Vue.config.debug = true

new Vue({
  el: '#app',
  router, // 创建和挂载根实例。记得要通过 router 配置参数注入路由
  template: '<App/>',
  components: { App },
});

(3)、app.vue文件

app.vue是我们的主组件,所有页面都是在App.vue下进行切换的,app.vue在所有页面都有,通常将公用的组件放在里面

<template>
  <div id="app">
    <main-header></main-header>
    <mainSidebar/>
    <!-- Content Wrapper. Contains page content -->
    <router-view></router-view>
    <!-- /.content-wrapper -->
    <MainFooter/>
  </div>
</template>

5、npm run build 后生成的dist文件访问本地static路径下的data.json数据有问题,需要修改productionSourceMap属性为false

 module.exports = {
  build:{
     assetsSubDirectory: 'static',  //修改这里成你项目放置静态文件的目录
     assetsPublicPath: './',     //修改这里成你项目放置静态文件的目录
     productionSourceMap: false     //修改为false
  }
 }

6、异步DOM更新

如果需要拿到更新后dom中的数据,则需要通过 Vue.nextTick(callback),在DOM更新后,执行某个操作(属于DOM操作)
实例调用vm.$nextTick(function () {})

methods: {
  fn() {
    this.msg = 'change'
    this.$nextTick(function () {
      console.log('$nextTick中打印:', this.$el.children[0].innerText);
    })
  }
}

 

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » Vue2.0构建——踩过的坑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址