使用 Vue 开发单页应用全攻略

谁践踏了优雅 2022-06-11 09:44 329阅读 0赞

# 使用 Vue 开发单页应用全攻略 #

网上面有很多关于如何使用 Vue 开发单页应用的教程，从 Vue-cli 的使用到 Vue router 的配，也是非常的详细。但是却没有对各个需要的知识点做扩展，再加上技术的更新换代也是几何倍的，所以现在决定写一系列关于如何从头开发 Vue 单页应用的攻略，希望对各大热爱学习的朋友有所帮助，同时如果写的有什么不对的地方希望指正。谢谢。

## 一、知识储备 ##

### EcmaScript 6 ###

> ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标 准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6 相对于它以前的版本可谓是突飞猛进，新增了块作用域、箭头函数、Class、Promise、Module 以及 N 多的新特征和语法。而且不需要担心不同浏览器对 ES6 的兼容性问题，你可以放心的使用 Babel 或 TypeScript 来处理各种问题。

学习 ES6 语法中比较常用的部分推荐看如下文章：

[30分钟掌握ES6/ES2015核心内容][30_ES6_ES2015]

学习 ES6 的全部特征推荐阮一峰开源的书籍

[ECMAScript 6 入门][30_ES6_ES2015]

### Sass ###

> Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

Sass 能够使你像开发真正的计算机语言般开发你的 CSS。什么，你想将常用的 CSS 封装成一个函数，或者继承上一个 CSS 的样式？没问题，使用 Sass 就可以解决了。当然，同样优秀的还有 Less 和 Stylus，这里不做讨论。

Sass 官网：

[Sass][]

## 二、开始使用脚手架 ##

使用 Webpack 搭建过项目的人肯定知道，光是 webpack.config.js 和 package.json 的配置就非常的复杂了，更别提其他的各种文件了。感谢 Vue-cli 使这一切变得非常的简单，接下来介绍一下如何使用 Vue-cli 搭建开发环境。

1.  全局安装 vue-cli

cnpm install -g vue-cli

1.  初始化 Vue 项目

vue init webpack my-project

1.  进入 my-project

cd my-project

1.  安装 node\_modules

npm install

1.  运行项目

npm run dev

第五步之后等待几秒钟，就会自动打开 localhost:8080，你会看到一个 Vue 项目搭建成功的页面。因为墙内使用 NPM 会很慢，推荐使用阿里的镜像，只需要安装：

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

然后使用 `cnpm` 来代替 `npm` 即可。

## 二、配置文件介绍 ##

通常使用脚手架工具搭建之后会你会发现开发环境有近 100M 的大小，不用担心，通常都是因为每次执行 `cnpm install` 时产生的 node\_module 文件，而生产环境中不需要考虑。

这里介绍几个常用的文件，其他的配置文件有兴趣的话可以阅读相关的介绍文章。

### webpack.base.config.js ###

build 目录下的 webpack.base.conf.js 是用来配置主要的 Webpack 编译入口、输出路径、命名规则等等。同时在目录下还有 webpack.dev.conf.js（开发环境配置） 和 webpack.prod.conf.js（生产环境配置）。

### dev-server.js ###

build 目录下的 dev-server.js 配置了开发中间件 webpack-dev-middleware 和热载中间件 webpack-hot-middleware，同时挂载代理服务器，配置静态资源等等。你能够修改 `var uri = 'http://localhost:' + port` 代码来设置默认的访问路径（默认为：localhost:8080）。

### config/index.js ###

config 文件夹下面核心的问题，在本文件你可以配置项目的 build 的目录和文件名。同时，也可以配置开发环境的 proxy，用反向代理解决跨域问题。

1.  生产环境的配置

env: require('./prod.env'),
    // 生成入口文件 index.php 的打包路径
    index: path.resolve(__dirname, '../dist/index.php'),
    // 生成的文件夹名称（dist)
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 静态资源文件名称（static）
    assetsSubDirectory: 'static',
    // index.php 文件引用资源的相对路径
    assetsPublicPath: '/',

1.  proxy 的配置

// 使用 interface 来配置 API，就相当于 http://your.server.com/interface
    proxyTable: {
      '/interface': {
        // 目标服务器地址
        target: 'http://your.server.com',
        changeOrigin: true,
        secure: false
      }
    }

更加具体的配置请参考：

[vue-cli的webpack模板项目配置文件分析][vue-cli_webpack]

## 三、如何安装一个 NPM Package ##

**我想要安装 CSS Package**

1.  第一步，找到自己想要的插件（比如 normalize.css）
2.  在命令行中敲下： `cnpm install normalize.css --save-dev`
3.  在 main.js 中引用： `import 'normalize.css'`

**我想要安装 JS Package**

1.  第一步，找到自己想要的插件（比如 normalize.css）
2.  在命令行中敲下： `cnpm install normalize.css --save-dev`
3.  使用 axios 来引用 axios 插件 `import axios from 'axios'`
4.  根据需要在全局绑定 Vue.prototype.$http = axios;

这样你就可以在 Vue 组件中使用 `this.$http.get` 或者 `this.$http.post` 来请求数据了，当然还有 put、jsonp、delete 等方式和配置，这里不具体写了。如果想要了解更多 axios 的配置和使用技巧，请参考：

[axios][]

## 四、Babel 和 Postcss ##

### Babel ###

> Babel 是一个 JavaScript 编译器。

使用 Babel 能够让我们大胆的使用 ECMAScript 的新一代标准，比如最流行的 ES6 或者最新的 ES8 以及 ES9，而不用去担心一系列的兼容性问题，交给 Babel 去处理就对了。

打开 package.json，在 devDependencies 下可以找到 babel-core 和其他几个 babel package。同时在项目根目录下有一个叫做 .babelrc 的文件，这个文件就是 Babel 的配置文件，打开之后可以看到使用了 stage-2 的标准，不过接下来我们要安装 babel-preset-es2015 Package 来支持 ES6 的语法。

1.  安装 babel-preset-es2015：`cnpm install babel-preset-es2015 --save-dev`
2.  修改 .babelrc 文件：

{
      "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], ["es2015", "stage-2"] ],
      "plugins": ["transform-runtime"],
      "env": { "test": { "presets": ["env", "es2015", "stage-2"], "plugins": ["istanbul"] } } }

1.  开始使用 ES6 的语法进行编程吧！

当然，还有比如 polyfill 等等的 Package 需要手动安装才能支持，推荐阅读官方文档：

[Babel][]

### PostCSS ###

> PostCSS 是一个通过 JS 插件编译 CSS 的工具

PostCSS 可以看成是一个平台，在这个平台上面包含了很多专门处理 CSS 的插件，比如规范 CSS，使用新一代的 CSS Next 等等。其实 Vue-cli 项目里面内置了 PostCSS，同时安装了 autoprefixer，它会在 build 阶段自动生成给 CSS 元素加上前缀。想要了解更多的 PostCSS可以阅读：

[PostCSS][]

## 五、路由配置 ##

直接给个官方文档的传送门：

[vue-router][]

路由配置中的问题：

[Vue路由History mode模式中页面无法渲染的原因及解决][Vue_History mode]

## 六、结束语 ##

现在可能没有什么技术能够像前端这样丰富多彩，各种框架、工具、插件层出不穷，新手很容易在这样一个复杂的圈子里面迷失。同时，很多人使用一个框架，就很想要分出一个高低。其实，只要是适合自己项目的框架就是值得尝试的。技术不断变化，最重要的还是其中的基础知识，也许当你各种工具、框架玩的非常的厉害时，却忽视了其中的核心知识。所以，要始终记得技术是为人类服务的，同时基础知识始终要掌握牢靠。

[30_ES6_ES2015]: http://www.jianshu.com/p/ebfeb687eb70
[Sass]: https://www.sass.hk/
[vue-cli_webpack]: http://blog.csdn.net/hongchh/article/details/55113751
[axios]: https://www.awesomes.cn/repo/mzabriskie/axios
[Babel]: http://babeljs.cn/
[PostCSS]: https://github.com/postcss/postcss
[vue-router]: https://router.vuejs.org/zh-cn/
[Vue_History mode]: http://blog.csdn.net/xjlinme/article/details/74783887