Vue+Webpack+css预处理开发单页应用
Posted 前端迷
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue+Webpack+css预处理开发单页应用相关的知识,希望对你有一定的参考价值。
最近 Vue 越来越火了, 知乎上到微博上, 越来越多的人在用它. 之前有学过一点 NG1 , 相比 NG1, VUE 的 API 十分简单.再通过使用 Vue 全家桶, 可以进行更高效的开发. 以下是使用 Vue 全家桶(VueJS + VueRouter + Vuex + Webpack) 开发出来 SPA(单页应用) 的一些过程. 使用的是 豆瓣的公共 API .
安装 Webpack
既然要用全家桶, 那么就需要先使用 Webpack, Webpack 是一个非常方便工具, 能根据配置文件自动地进行 JS 文件的打包.
首先我们需要安装 Node.js. 然后使用 NodeJS 里的 npm (NodeJSPackageManager) 进行包的安装和管理.
安装完毕之后, 打开 cmd , 在项目文件夹内运行 $ npm init
, 之后会有一大串要你填的信息, 直接回车到底就行了.
完成之后, 这时项目文件夹中出现了一个 package.json
的文件.
做好了前期的准备工作, 我们现在开始正式安装 webpack
, 在 命令行中输入 $ npm i webpack -g
, -g 表示 webpack
将会是全局安装, 如果发现安装速度慢或甚至无法安装可以使用 cnpm
或者每次安装时都切换淘宝镜像, 在 -g
后添加 --registry=http://registry.npm.taobao.org
, 下同.
等待安装结束, 我们可以开始写 webpack
的配置文件了. 在项目文件夹的根目录创建一个名叫 webpack.config.js
的文件.
然后我们再创建一些文件, 使文件结构像这样:
app
index.js
webpack.config.js
package.json
index.html
现在, 我们先开始配置 webpack
的入口文件和出口.
代码如下:
module.exports = {
entry: './app',
output: {
path: './build/, filename: 'bundle.js' } };
index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<script src="./build/bundle.js"></script>
</body>
</html>
接下来,
index.js: var h2 = document.createElement('h2'); h2.innerHTMl = 'HELLO VUEJS';document.body.appendChild(h2);
直接在 cmd 中运行 webpack
,就能看到页面显示了一个h2标签,内容是 HELLO VUEJS.
安装 Webpack-dev-server
可以打包之后我们可以让 webpack 运行一个自己的服务器, 并且能在我们文件更新之后, 让其自动刷新
继续使用 cmd
, 输入指令 npm i webpack-dev-server --save-dev
. --save-dev
会讲安装后的包放在package.json 的devDependencies,一个放在dependencies里面, 产品模式用dependencies,开发模式用devDep.
安装完成之后, 继续往 webpack.config.js
中添加配置.
devServe: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
}
再向 package.json
中 "script"
添加配置
"script": {
"start": "webpack-dev-server --hot --inline"
}
.json
格式的文件里无论键名还是值都必须使用双引号.
写好之后在 cmd
中输入 npm run start
跑出一串字之后, 打开 localhost:8080
, 就能看到结果, 然后我们随意修改一下文本的内容保存一下, 会发现浏览器内的文字自动地刷新了.
如何写 CSS
现在能改动结构了, 但是有了结构就改想想 css
的问题了.
webpack 是把一个文件看作一个模块, 我们需要使用专门的 webpack loader
来处理各式文件.
处理 css 文件时, 我们需要 2个loader, 一个 style-loader
和 css-loader
, 先来安装这两个 loader
,
输入 $ npm i css-loader style-loader --save-dev
.
安装完毕后, 我们再来配置 webpack.config.js
,
module: { loaders: [ {
test: /.css$/, //匹配到所有的css文件
loader: 'style!css', //有多种写法, 这是字符串式的写法, style-loader 等loader 可以省去loader 直接写 loader名,
loaders: ['style', 'css'], //数组写法, 注意要使用loaders!, loader 的执行顺序是从右到左, 也就是先用css-loader 再使用 style-loader } ] }
当然, 我们也可以使用 less sass stylus
等其他的 css 预处理器, 只需要在安装相应的loader, 推荐软件 visual studio...
安装 less-loader
, 输入 $ npm i less-loader --save-dev
, 等待安装结束后, 检查一下安装的依赖中是否有之前没安装过的, 要继续安装.(这个问题也许是之前我没有安装其他模块的依赖. less-loader
依赖 less
).
这里我们把刚才的 module.loaders 改一下
module: { loaders: [ {
test: /.less$/, //匹配所有以 .less 结尾的所有文件 loader: 'style!css!less', //用 less-loader 来处理文件, 要先于 css-loader 处理之前处理 less
loaders: ['style', 'css', 'less'], } ] }
这样,我们也可以使用 less 了.
在 index.js 中以 AMD 方式引入 require('main.less');
. 这样就能愉快书写 less 了.
如何使用 EcmaScript 2015
ES6 已经是2016年之后的趋势了, VueJS
全家桶里的很多例子都是由 ES6 写成的. 是时候使用 EcmaScript 2015
了!
首先我们需要安装 babel-loader
以及 babel
:
在命令行内输入
$ npm install --save-dev babel-preset-env
安装babel, 以及
$ npm i --save-dev babel-loader
安装babel-loader
安装之后更改 webpack.config.js
里的module.loaders
..., {
test: /.js$/, loader: 'babel-loader'
}
babel 要求一个预制值, 可以在
..., {
test: /.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } }
不过这样写, 在 .vue
文件中的 JS 将无法被处理.
这时 我们应该直接写到
module: ...,babel: {
presets: ['es2015'] }
[1, 2, 3].forEach( (that) => console.log(that) );
看看转换的结果吧
安装 VueJS, 使用 vue-loader, 单文件组件
搞了这么久, Vue 的 V 字都没开始写.
现在开始安装 Vuejs
$ npm i vue
并且在 index.js
里引入 Vue
import Vue from 'vue';
安装 vue-loader, 这样我们就能够使用 .vue 直接创建单文件组件了.
并且需要在 webpack.config.js
里加入
resolve: {
alias: {
'vue$': 'vue/dist/vue.js' } }
引入单文件组件:
import MainView from './components/Mainview.vue';
如何直接用组件渲染到 el: #app
上?
使用
new Vue({ render (h) { h(MainView); //将 MainView 渲染 } })
.$mount('#app'); //将渲染到 #app, 将会替换 #app
使用 Vue-router
$ npm install vue-router`
如果本身 应用页面很多的话, 可以将路由文件单独独立出来成一个文件.
首先在 router.js 引入
import Vue from 'vue';
import VueRouter from 'vue-router'; Vue.use(VueRouter);
继续来定义路由:
const router = new VueRouter({
routes: [ {
path: '/',
component: HeaderVue //当只有一个Vue 没有其他命名路由时使用 components: {
//当有其他命名路由时使用, 注意s!
nameA: HeaderVue,
nameB: HelloVue,
default: ContentVue } } ] });
最后我们将这个参数用 module.export = router;
传递到 index.js
.
这里 node 提供了个函数 require(['./components/Content.vue'], resolve)
就能直接写了.
component: require(['./components/Content.vue'], resolve);
使用 Vuex
$ npm i vuex
Vuex 是 Vue 的状态管理工具.
import Vuex from 'vuex';
const store = new Vuex.Store({
state: ..., //状态 mutations: ..., //同步的改变状态, 请调用 mutation 来改变状态,而不是通过修改state actions: ... //异步改变状态
});
Over!
以上是关于Vue+Webpack+css预处理开发单页应用的主要内容,如果未能解决你的问题,请参考以下文章
最新文章推荐:使用 Vue.js 和 Bluemix 创建模块化的单页应用程序