一、环境配置什么的看上一篇博客,这里简单提两句
1、安装webpack
cnpm install webpack -g
2、安装vue脚手架
npm install vue-cli -g
二、项目开始
1、cd进入目录路径
2、进入目录创建项目
vue init webpack-simple 工程名字<工程名字不能用中文>
或者创建 vue1.0 的项目
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>
3、cd进入创建的工程目录,目录结构如下图
4、安装依赖,注意这里用npm install 安装,不要用淘宝的镜像安装
5、安装 vue 路由模块vue-router
和网络请求模块vue-resource
cnpm install vue-router vue-resource --save
6、npm run dev 启动项目
如果没有其他问题会看到项目启动起来
三、先玩一下组件
1、在App.vue中编辑
第一。一个组件下只能有一个并列的 div,可以这么写,所以复制官网示例的时候只要复制 div 里面的内容就好。
第二。数据要写在 return 里面而不是像文档那样子写
Vue 的组件的使用。
在工程目录/src
下创建component
文件夹,并在component
文件夹下创建一个 firstcomponent.vue
并写仿照 App.vue 的格式和前面学到的知识写一个组件。
<div id="firstcomponent">
<h1>I am a title.</h1>
<a> written by {{ author }} </a>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
author: "微信公众号 jinkey-love"
}
}
}
</script>
<style>
然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了<div id="app"></div>所以就以这个组件作为主入口,方便 )
第一步,引入。在<script></script>标签内的第一行写
import firstcomponent from './component/firstcomponent.vue'
第二步,注册。在<script></script>
标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!
export default {
data () {
return {
msg: 'Hello Vue!'
}
},
components: { firstcomponent }
}
第三步,使用
。
在
<template></template>
内加上<firstcomponent></firstcomponent>
<template>
<div id="app">
![](./assets/logo.png)
<h1>{{ msg }}</h1>
<firstcomponent></firstcomponent>
</div>
</template>
完成后的代码:
这时候看看浏览器上的 http://localhost:8080/
页面(之前打开过就会自动刷新),如果你没看到效果是因为你没有对 App.vue
和 firstcomponent.vue
进行保存操作,保存后页面会自动刷新。
使用路由搭建单页应用
在webpack.config.js
加入别名
resolve: {
alias: {vue: 'vue/dist/vue.js'}
}
修改完之后的
webpack.config.js
是这样子的:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}
再按之前的方法写一个组件 secondcomponent.vue
<template>
<div id="secondcomponent">
<h1>I am another page</h1>
<a> written by {{ author }} </a>
<p> 感谢 <a href="https://github.com/showonne">showonne</a>大神的技术指导</p>
</div>
</template>
<script>
export default {
data() {
return {
author: "微信公众号 jinkey-love",
articles: [],
}
}
}
</script>
<style>
</style>
并且配置路由规则和 app 启动配置项加上 router,旧版的 router.map 方法在 vue-router 2.0
已经不能用了。修改后的main.js
如下:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource'
//开启debug模式
Vue.config.debug = true;
Vue.use(VueRouter);
// 定义组件, 也可以像教程之前教的方法从别的文件引入
const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }
import secondcomponent from './component/secondcomponent.vue'
// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{
path: '/first',
component: First
},
{
path: '/second',
component: secondcomponent
}
]
})
// 现在我们可以启动应用了!
// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
router: router,
render: h => h(App)
}).$mount('#app')