想着这几天的体验，刚开始捣鼓着webpack构建Vue2.0的项目，真的是一片心酸啊～～因为看着网上诸多关于webpack + vue的教程，这些教程大多数都是一开始就介绍一大堆相关的配置，对于刚入门vue的新手小白们无疑是十分痛苦的。【个人建议，也是我自己比较有效的方法，对于这些相关的配置，你可以浏览，记住作用是什么，但不要先去深究其中，可以在项目中深入了解。】
本文前提准备：有 vue 基础，搭配好 nodejs、webpack、vue-cli 环境，相关的安装教程网上的都大同小异，就不啰嗦了，直接从 webpack 构建项目开始。
初始化创建一个 Vue 项目
- 切换到目标文件夹。
- 执行命令（这里的项目名为：project）。
sudo init webpack 项目名称
注意：项目名称不能包含有大写字母，不然会报错。
image1.png
- 输入相关的信息和依赖文件选项，这些根据你自己的需要，完成后开始构建你的项目。
image2.png
- 项目构建完成，切换到目标文件夹，会看到已经生成了一大堆文件。
image3.png
- 在目标文件夹下，安装相关的依赖，直到完成。
sudo npm install
image4.png
- 相关依赖安装完成后，启动服务器，启动项目。
sudo npm run dev
image5.png
image6.png
- 接下来，你就可以在浏览器中在服务器中访问你的 localhost，注意端口号要一样。
image7.png
以上，就是通过webpack构建Vue项目的过程。接下来，简单地总结相关的项目文件目录。
文件目录
先来看下目录结构：
image8.png
- build：webpack 的相关配置，即：构建脚本目录。【这里存放我们最后的代码】
- config：路径端口值的相关配置，即：项目配置。【一般情况下，默认配置就好了】
- node_modules：依赖模块。【这里有贼多文件。。不管】
- src：组件和入口文件，即：项目开发的目录。
- static：静态资源，不会被 wabpack 构建。【主要存放字体图片图标等】
上面这几个就是根目录下面的五个子文件夹，主要的作用上面也介绍了。下面继续了解下这些文件夹里面的主要文件。
build（构建脚本目录）
build 文件夹下的相关文件如下：
image9.png
- build.js：生产环境构建。
- check-version.js：版本验证工具。
- utils.js：构建相关工具。
- vue-loader.conf.js：vue-loader 的相关配置（vue-loader：将.vue文件转换成 webpack 包，并且和整个打包过程组合起来）。
- webpack.base.conf.js：wabpack 基础配置。
- webpack.dev.conf.js：wabpack 开发环境配置。
- webpack.prod.conf.js：wabpack 生产环境配置。
config（项目配置）
config 文件夹下的相关文件如下：
image10.png
- dev.env.js：开发环境的变量。
- pro.env.js：生产环境的变量。
- index.js：项目配置文件。
尤其要重视的是index.js这个文件。
node_modules（依赖模块）
这个文件夹下的子文件夹贼多～主要是存放相关的依赖文件。。不多说～
static（静态资源）
主要存放字体、图片和图标等。
src（组件和入口文件）【放在最后总结，表示非常非常重要～】
src 文件夹下的相关文件如下：
image11.png
- assets：资源目录。
- components：存放相关的组件文件，是 .vue 文件。
- router：路由文件，主要存放的是相关的路由代码。
- App.vue：项目入口文件，也就是根组件。（你怎么实现你的页面，引进外部相关模块后，就在这里进行）。
- main.js：项目的核心文件。即：引进模块，实例化 Vue 对象等。
根目录下的其他重要文件
- index.html：首页入口文件。
- package.json：项目配置文件，重要。【在项目中慢慢体会！】
总结了这么多个文件及其作用，来看看下简单的实现例子。
简单例子
需求：实现简单的路由切换。
- 将原本的页面去掉。
- 添加两个组件，用于路由的渲染。
image12.png
- 实现两个组件文件。
// page1.vue
<template>
<transition name="t1">
<div id="page1">
{{ msg }}
</div>
</transition>
</template>
<script>
export default {
name: "page1",
data() {
return {
msg: "page11111111"
};
}
};
</script>
<style>
#page1 {
width: 100%;
height: 600px;
background-color: violet;
margin-top: 15px;
font-size: 40px;
}
.t1-enter-active,
.t1-leave-leave {
transition: opacity 1s ease;
}
.t1-enter,
.t1-leave-to {
opacity: 0;
}
.t1-leave,
.t1-enter-to {
opacity: 1;
}
</style>
// page2.vue
<template>
<transition name="t2">
<div id="page2">
{{ msg }}
</div>
</transition>
</template>
<script>
export default {
name: "page2",
data() {
return {
msg: "page22222222"
};
}
};
</script>
<style>
#page2 {
width: 100%;
height: 600px;
background-color: silver;
margin-top: 15px;
font-size: 40px;
}
.t2-enter-active,
.t2-leave-leave {
transition: opacity 1s ease;
}
.t2-enter,
.t2-leave-to {
opacity: 0;
}
.t2-leave,
.t2-enter-to {
opacity: 1;
}
</style>
- 在index.js文件中添加路由信息。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引进组件
import page1 from '@/components/page1'
import page2 from '@/components/page2'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ // page1路由信息
path: '/page1',
name: 'page1',
component: page1
},
{ // page2路由信息
path: '/page2',
name: 'page2',
component: page2
},
]
})
- 最后，在 app.vue 文件中添加我们想要的页面布局。
<template>
<div id="app">
<router-link to="/page1" class = "btn">page111Btn</router-link>
<router-link to="/page2" class = "btn">page222Btn</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.btn{
font-size: 20px;
text-decoration: none;
border: 1px solid silver;
margin-left: 10px;
padding: 10px;
color: black;
font-weight: 800;
}
</style>
- 实现的效果如下：
效果.gif
