vue2.0配置 https://github.com/wike933/vuebook

Posted 2020-09-17

前言： 学习VUE几个月,看了很多例子和资料，vue虽然中文文档比较多，但是都是一些零散的教程，我这里打算写一本完整的VUE2.0的开发教程（因为时间有限，每天更新一小块，希望大家支持） 本人QQ ：200569525 你想学什么，或者有什么疑问 可以联系我

正文：

第一步安装vue
我们一般使用vue-cli

全局安装 vue-cli

$ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖

$ cd my-project
$ npm install
$ npm run dev

这个虽然可以运行，但是根据现有开发环境有些地方需要配置（例如静态资源目录,后台数据代理）

进入到目录 config 打开index.js文件

找到 assetsSubDirectory: ‘./‘, 这里配置成当前目录，意思时静态文件夹按照./为资源根目录

找到 index: path.resolve(__dirname, ‘../../dist/index.html‘),设置打包后的HTML路径

找到 assetsRoot: path.resolve(__dirname, ‘../../dist‘), 设置打包后资源目录

找到 port:8080,这里是设置开发环境的服务器断口（可以设置成3000）

找到 proxyTable 这个是设置代理的，我们经常后台和前端同时开发，后台自己起一个服务，如果不配置代理需要每次VUE修改就重启所以我们开发环境配置一个代理，这样开发环境就可以不需要编译，就能与后台数据传输。

（重点）

这里说明下，有的同学不理解 我们一般vue-cli开发是启动npm run dev 这个时候默认开启是 http://localhost:8080 或者http://localhost:3000, 这个时候如果假设我要和后台交互发送AJAX这个时候就跨域了（因为后台端口不是这2个，一个端口不能启动2个应用程序），如果不配置代理就无法请求，如果要请求只能 npm run bulid 编译打包，放到服务器（后台）的静态资源目录，这样修改就需要每次都编译，如果配置了代理 使用开发环境这样修改就及时更新（ http://localhost:8080 这样搭建的服务器你vue修改 他会及时反应），开发效率就非常高

 proxyTable: {
    	 ‘/api‘ :{
        target: ‘http://127.0.0.1:3000‘, // 目标域名
        pathRewrite:{"^/api":""},
        secure:false

     }
    },

以上配置是 当你AJAX请求 假设请求/api/xxx的连接时，系统会自动代理到 ** 127.0.0.1:3000/xxx** 下（如果请求不是以/api开头那不进行重定向，访问的还是localhost+端口），这样代理就转发， 我们一般在main.js定义一个全局变量 xhr="/api" 然后ajax里面写 $.get(xhr+"/test/"),在正式环境将xhr赋值为空字符串，这样开发环境使用代理， 非开发环境使用正式路径。

重点

这个地方很多人忘记改，很坑。会导致静态资源渲染时候出错。提醒大家一定要改 进入 build 打开 dev-server.js 找到

app.use(staticPath, express.static(‘./static‘))

替换成

app.use(staticPath, express.static(‘./‘))

这样上面配置的静态资源就是根目录开始，不然需要多个static目录

###下面讲解vue开发以及一些技巧

首当其中的是 main.js

import Vue from ‘vue‘
import App from ‘./App‘		  //引入根模块	
import router from ‘./router‘ //引入路由
import store from ‘./store/‘  //引入全局数据管理	 
window.xhr="/api" 定义全局属性，用于AJAX前缀

如果需要造假数据 index.html 需要引入 <script src="http://mockjs.com/dist/mock.js"></script>

var Random = Mock.Random
	Random.ctitle()
var data = Mock.mock({
		    ‘list|8‘: [{
		        ‘id|+1‘: 1,
		     	"title":‘@ctitle‘
		    }],
		});
Mock.mock("/notice.json", function(options) {
			console.log(options)
		    return data
		})

这个时候你就可以 $.get(‘/notice.json/‘)获得假数据，关于mock的用法详情请参考官网 http://mockjs.com/

注意

new Vue({
  el: ‘#app‘,
  router,
  store,
  template: ‘<App/>‘,
  components: { App }
})

以上代码必须在mock的逻辑之后，不然会出现请求404

//这里写 mock代码
/*
  所有mock代码全部写完，这个时候绑定vue插件
*/

new Vue({
  el: ‘#app‘, //绑定到指定Id的元素下（可以不管）
  router,	//这里是注册路由（这个写法等于 router:router）
  store,	//这里是注册全局数据管理的注入 这个写法等于 {store：store}
  template: ‘<App/>‘, //这个定义魔板 默认就行
  components: { App } //这里是引入根组件 （默认是app.vue）这个写法等同于 components: { App:App}

###根组件 app.vue

<template>
  <div id="app">
    <router-view></router-view> //这个定义路由模板
  </div>
</template>

<script>
export default {
  name: ‘app‘ //这里定义组件名
}
</script>
<style>
</style>

注意

这里的template必须有一个根元素

    <template>
		  <div id="app">
			<router-view></router-view> 
		  </div>
	 	  <div id="app2">
			<router-view></router-view> 
		  </div>
	</template>

这种情况是不允许的

现在我们是单一<router-view>假设我一个模板中需要多个组件路由我们可以这样

  <div>
    <router-view class="view one"></router-view>
    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>
  </div>

路由文件./router/index.js(详细的等会介绍）这样写

import Vue from ‘vue‘
import Router from ‘vue-router‘//引入路由
import Hello from ‘@/components/Hello‘ //引入组件
import Hello1 from ‘@/components/Hello1‘ //引入组件
import Hello2 from ‘@/components/Hello2‘ //引入组件
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘, //路由路径
      name: ‘Hello‘,  //路由别名
     components: {  //路由包含的组件  
        default: Hello,  //这个是默认的 对应 <router-view class="view one"></router-view>
        a: Hello1, //这个对应 <router-view class="view two" name="a"></router-view>
        b: Hello2  //这个对应 <router-view class="view two" name="b"></router-view>
      }
    }
  ]
})