这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
本篇文章主要介绍了详解用 vue-cli 来搭建 vue 项目和 webpack,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
vue-cli
用 vue-cli 来搭建 vue 项目
第一步:全局安装 vue-cli
- sudo npm install vue-cli -g
第二步:初始化一个项目
- vue init webpack-simple projectName
第三步:把文件切换到初始化的项目中
- cd projectName
第四步:安装依赖
- npm install
当然也可以用淘宝镜像 cnpm 来安装,这样快很多
- cnpm install
第五步:运行
- npm run dev
完成一个初始化 vue 项目
webpack
要开始一个 vue 项目,
那也必须要了解 webpack
webpack 是一个前端资源模块化管理和打包工具
首先你可以建立很多个 js,CSS 文件,但是利用 webpack 就只需要在 index.html 那里引用一个 js 文件,也就是所谓的打包文件,不需要去引用所以的 js,css 文件
第一步:全局安装 webpack
- sudo npm install webpack -g
第二步:建立一个 package.json 基础配置文件
- npm init
第三步:安装 webpack 的依赖
- npm install webpack --save-dev
第四步:一个项目里面的 index.html 文件
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <script src="bundle.js">
- </script>
- </body>
- </html>
第五步:把需要的 js,css 文件单独写出来
- //module.js
- module.exports = 'It works from module.js.'
- //entry.js
- document.write('It works.')
- document.write(required('./module.js'))
写完需要的 js 文件
第六步:打包 entry.js 文件到 bundle.js 文件中
- webpack entry.js bundle.js
第七步:假设还有 css 文件
- //style.css
- body{
- background:red
- }
现在有了 css 文件也想要把 css 文件打包进去
第八步:把 css 文件也打包进去
修改 entry.js 文件
- require("!style-loader!css-loader!./style.css") // 载入 style.css
- document.write('It works.')
- document.write(require('./module.js'))
第九步:需要用到 loader, 自然要安装
- npm install css-loader style-loader
第十步:还需要再重新打包编译
- webpack entry.js bundle.js
css 的文件步骤很复杂,那么有更简单的办法不需要写的那么复杂
第十一步:建立一个配置 js 文件, webpack.config.js
- //webpack.config.js
- var webpack = require('webpack')
- module.exports = {
- entry: './entry.js',
- output: {
- path: __dirname,
- filename: 'bundle.js'
- },
- module: {
- loaders: [
- {
- test: /\.css$/,
- loader: 'style-loader!css-loader'
- }
- ]
- }
- }
这个 loaders: 是一个解析器
test: 就是需要解析模板的文件,是一个正则表达式
loader: 是需要用什么方式去处理 test 所包含的文件, 用 xxx-loader 去读取 test 的正则文件
第十二步:然后就可以把 css 文件打包的时候简单化了
- require('./style.css')
再重新编译一下就可以了
第十三步:不想要一直编译,想实时监控,
- webpack --watch
第十四步:也可以开一个静态 web 服务器,localhost,webpack-dev-server, 全局安装
- npm install webpack-dev-server -g
第十五步:运行 webpack-dev-server: 会实时监控
- webpack-dev-server
来源: http://www.phperz.com/article/17/0514/333925.html