webpack+vue构建单页面应用项目（1）

前言：

构建一个样式简洁，逻辑功能简单的demo，来记录项目构建的步骤，一步步优化，以巩固自己的知识，也希望给新入门的同学们一点灵感。因为作者也是只菜鸟，所以如果有人看到了这些文，发现错误的观点或者有更好的方法的都请告知作者，大家相互学习！
　　地址为demo的源代码：https://github.com/Mavis-0211/vue-webpack-demo
　　很重要的一点，要先装node。附上传送门：https://nodejs.org/en/download/

初步能想到的点：

用vue-cli和webpack搭建项目模板。
在项目中引用sass和zepto。
使用vue-router实现路由，构建单页面。
抽取公共组件。

一、安装淘宝源cnpm

npm是下载国外的包，大部分人网速都扛不住，所以我都是使用淘宝镜像cnpm。
1.安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.使用：
执行 npm install ... 的时候，改用 cnpm install ...
附上官方文档：https://npm.taobao.org/

二、搭建项目模板

1.全局安装vue脚手架 — vue-cli

cnpm install -g vue-cli

2.选取目录使用webpack

webpack的模板有"webpack"和"webpack-simple"，对于一般项目来说，"webpack-simple"已经够用了。"webpack"配置较多，功能也更丰富。

vue init webpack basic-functions（"basic-functions"为自己的项目名称）

项目初始化.tmp.jpg

3.在本地运行项目

cd basic-functions '(进入项目文件夹)'
cnpm install '(下载依赖包）'
npm run dev '(启动项目，一定要在有package.json的当前目录运行)'

在浏览器地址栏输入:localhost:8080，可以看到以下页面

项目运行出现的首页

三、文件结构介绍

项目一级目录

--- build '(webpack配置文件)'
--- config '(开发及生产环境配置)'
--- nodele_modules '(npm install 现在下来的依赖包)'
--- src ('开发目录)'
    |--- assets '(资源文件夹-js，vue，img，css等)'
    |--- App.vue '(App.vue组件)'
    |--- main.js '(预编译入口)'
--- static '(静态资源文件)'
--- .babelrc '(babel配置文件)'
--- .gitignore '(git提交忽略规则')
--- index.html '(主页)'
--- package.json '(项目配置文件)'
--- README.md

四、接入sass

安装依赖

cnpm install sass-loader --save-dev
cnpm install node-sass --save-dev

验证
新建一个scss文件，在App.vue的script中引用该scss文件。

<script>
    import './src/style/base.scss'
</script>

五、接入zepto

1.安装依赖

cnpm install webpack-zepto --save-dev

2.webpack.dev.conf.js配置，在plugins中加入

new webpack.ProvidePlugin({
  $: "webpack-zepto",
  Zepto: "webpack-zepto",
  "window.Zepto": "webpack-zepto"
})

ps：webpack.prod.conf.js中也要配置，保证打包出来的配置正确

3.验证

(./App.vue)
export default {
     mounted:function() {
       console.log($('img').length)
     }
}

六、路由vue-router进行页面跳转

(./App.vue)
<template>
  <div id="wrapper">
    <nav>
      <router-link to="/home">home</router-link>
      <router-link to="/user">user</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
  import 'src/style/style.scss'
</script>

(./components/Home.vue)
<template>
    <p class="content">This is Home</p>
</template>

(./components/User.vue)
<template>
    <p class="content">This is User</p>
</template>

(./main.js)
import Vue from 'vue'
import App from './App'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import './style/reset.scss'

import Home from './components/Home.vue'
import User from './components/User.vue'

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/user',
    component: User
  }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

home page

user page

至此，一个最简单的demo已经完成。智商问题吗，作者觉得webpack好多配置不知道什么作用~(　TロT)σ

下篇预告

对这个demo进行一些优化

最后编辑于：2017.12.04 07:57:38