vue.js 前端 Webpack + Vue

1 创建路由

=====================================================================

import hello from ‘@/component/Hello’

表示从当前目录下的 components 引入 Hello 文件，@表示当前目录，然后定义一个路由配置

// 引入 Vue

import Vue from ‘vue’

// 引入 Vue 的路由

import Router from ‘vue-router’

// 作用是引入 Hello 这个component

import hello from ‘…/component/Hello’

//使用路由

Vue.use(Router)

export default new Router({

routes: [

{

//路由路径，对应一个 url

path: ‘/hello’,

//路由别名，vue.js内部使用的名称

name: ‘Hello’,

//组件，对应.vue页面的名字

component: Hello

}

]

})

当用户访问http://localhost:8080/#/hello时，就会渲染./components/Hello.vue 文件，name：'Hello'定义了该路由在 vue.js内部的名称

2 创建一个新的Component

================================================================================

之前在路由中引入了 component ，接下来，就是创建这个文件 

页面效果

原生 Vue.js的代码存在于 new Vue({……}）中的代码，在Webpack 框架下，都应该放到`export default{……}`代码块中

3 Vue.js中的 ECMAScript

====================================================================================

我们使用的不是原生的 “JavaScript”，而是一种新的语言，就是 ECMAScript，严格说，ECMAScript是 JavaScript 的规范

let,var,常量与局部变量

声明本地变量，使用 let 和 var ，两者的区别如下

✨var：可能引起变量提升，或块级作用域的问题

✨let：就是为了解决以上问题存在的

在webpack下的vue.js中使用任何变量，都要使用var或let来声明

常量：

var a = 1;

let b = 10;

const NAME = ‘小刘’;

console.log(a);

console.log(b);

console.log(NAME);

导入代码:import

import 用于导入外部代码，例如：

因为Vue和Router是在package.json中定义的，因此可以直接 import … from 包名引入，否则要加上路径

// 引入 Vue

import Vue from ‘vue’

// 引入 Vue 的路由

import Router from ‘vue-router’

在from后面添加@符号，表示的是在本地文件系统中引入文件，@代表源代码目录，一般是 src，@出现之前，我们在编码时也是这样写：

import Hello from ‘…/components/Hello’

因为大量使用相对路径，这样会导致代码混乱，所以推荐使用@写路径

方便其他代码使用自己：export default { … }

在每个 vue 文件的

夸智网

vue.js 前端 Webpack + Vue