从0开始,查看了好多文档级初级教程。
安装环境
sudo pacman -S npm
npm install --registry=https://registry.npm.taobao.org -g vue vue-cli
# 前段打包工具
npm i -g webpack webpack-cli
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。
vue-cli
vue-cli
就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack、ESLint、babel
很多配置等等
vue-cli创建项目
vue --help
# 下面命令中就有如何创建一个项目
vue-init --help
# 执行创建命令后等待就可以了
vue init webpack vue_1
项目参数

这里有几个需要说明一下,没说明的直接回车选择默认就好,对项目没多大影响,很傻瓜式:
-
“Project name”:**这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车
-
“Install vue-router”:**是否需要vue-router,这里默认选择使用,这样生成好的项目就会有相关的路由配置文件
-
“Use ESLint to lint your code”:**是否使用ESLint,刚才说了我们这个项目需要使用所以也是直接回车,默认使用,这样会生成相关的ESLint配置
-
“Setup unit tests with Karma + Moch?”:** 是否安装单元测试。由于我们现在还没有单元测试,所以这里选择的是”N”,而不是直接回车哦
-
“Setup e2e tests with Nightwatch”:**是否安装e2e测试,这里我也同样选择的是“N”
这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes,要么下一步要下很多没有用的loader
项目目录:

1. build 文件夹:
build.js
logo.png
vue-loader.conf.js
webpack.dev.conf.js
check-versions.js
utils.js
webpack.base.conf.js
webpack.prod.conf.js
如上,这个文件夹主要是进行webpack的一些配置,就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件,分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容,一些简单的配置都已经有了,包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的,比如生成环境需要加上UglifyJsPlugin插件等可以自行配置,或者一些插件增加或者不需要的删除,其实都是和业务相关了,其他的都可以不需要动。
2. config 文件夹:
4月 23 09:59 dev.env.js
4月 23 09:59 index.js
4月 23 09:59 prod.env.js
4月 23 09:59 test.env.js
这几个配置文件我觉得最主要的就是index.js 这个文件进行配置代理服务器,这个地方和我们息息相关,和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性,然后在里面加上对应的后台地址即可 ,构建生成环境也在这里配置,例如:
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
3. src文件夹:
4月 23 09:59 assets
4月 23 09:59 components
4月 23 09:59 router
4月 23 09:59 App.vue
4月 23 09:59 main.js
这个文件夹是整个项目最主要以及使用频率最高的文件夹。
-
“assets”: 共用的样式、图片
-
“components”: 业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件
-
“router”: 设置路由
-
“App.vue”: vue文件入口界面
-
“main.js:对应App.vue 创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置
4.static 文件夹:
存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用
5.package.json:
这个文件有两部分是有用的:scripts 里面设置命令,例如设置了dev用于调试则我们开发时输入的是
npm run dev
;例如设置了build 则是输入 npm run build
用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中,分别对应全局下载和局部下载的依赖包
下载依赖包
npm install --registry=https://registry.npm.taobao.org
运行 npm run dev
当所有依赖包都下载好之后,输入命令:npm run dev
运行就可以看到一个自带的默认页面打开。此时项目就已经全部搭建好并且运行了~炒鸡简单吧,总结下来其实只有四步
-
npm install --global vue-cli
下载vue-cli脚手架 -
vue init webpack vue_1
生成项目,形成基本结构 npm install # 依赖包
-
npm run dev
运行
打包 npm run build
第一个demo
Webpack 入门教程
分类 编程技术
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
接下来我们简单为大家介绍 Webpack 的安装与使用。
创建项目
接下来我们创建一个目录 app:
mkdir app
在 app 目录下添加 maxzhao1.js 文件,代码如下:
app/maxzhao1.js 文件
document.write("It works.");
在 app 目录下添加 index.html 文件,代码如下:
app/index.html 文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="maxzhao_bundle.js" charset="utf-8"></script>
</body>
</html>
接下来我们使用 webpack 命令来打包:
webpack-cli maxzhao1.js -o maxzhao_bundle.js
执行以上命令会编译maxzhao1.js
文件并生成maxzhao_bundle.js
文件,成功后输出信息如下所示:
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./maxzhao1.js 29 bytes {0} [built]
在浏览器中打开index.html
,输出结果如下:

创建第二个 JS 文件
接下来我们创建另外一个 js 文件maxzhao2.js
,代码如下所示:
app/maxzhao2.js 文件
module.exports = "It works from maxzhao2.js.";
更新 maxzhao1.js 文件,代码如下:
document.write(require("./maxzhao2.js"));
接下来我们使用 webpack 命令来打包:
webpack maxzhao1.js -o maxzhao_bundle.js
Entrypoint main = maxzhao_bundle.js
[0] ./maxzhao1.js 42 bytes {0} [built]
[1] ./maxzhao2.js 46 bytes {0} [built]
在浏览器访问index.html
,输出结果如下所示:

接下来大家可以移步RUNOOB
Loader:加载其它文件
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader,他们做两件不同的事情,css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
安装css-loader
和style-loader
接下来我们使用以下命令来安装css-loader
和style-loader
(全局安装需要参数 -g)。
npm i css-loader style-loader
ls
# 多了一个文件夹 node_module 和文件 pack-lock.json
# ` node_modules `目录,它就是 css-loader 和 style-loader 的安装目录。
使用
接下来创建一个 style.css 文件,代码如下:
body { background: yellow; }
修改 maxzhao1.js 文件,代码如下:
require("!style-loader!css-loader!./style.css");
document.write(require("./maxzhao2.js"));
编译:webpack maxzhao1.js -o maxzhao_bundle.js

require CSS
文件的时候都要写 loader
前缀!style-loader!css-loader!
,当然我们可以根据模块类型(扩展名)来自动绑定需要的loader
。 将maxzhao1.js
中的 require("!style-loader!css-loader!./style.css")
修改为require("./style.css")
:
require("./style.css"); document.write(require("./maxzhao2.js"));
然后执行:
webpack maxzhao1.js maxzhao_bundle.js --module-bind 'css=style-loader!css-loader'
配置文件:配置编辑选项
我们可以将一些编译选项放在配置文件中,以便于统一管理:
创建 webpack.config.js 文件,代码如下所示:
module.exports = {
entry: "./maxzhao1.js",
output: {
path: __dirname,
filename: "maxzhao_bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
接下来我们只需要执行webpack
命令即可生成maxzhao_bundle.js
文件:
webpack Hash: 4fdefac099a5f36ff74b Version: webpack 1.12.13 Time: 576ms Asset Size Chunks Chunk Names bundle.js 11.8 kB 0 [emitted] main [0] ./runoob1.js 65 bytes {0} [built] [5] ./runoob2.js 46 bytes {0} [built] + 4 hidden modules
webpack
命令执行后,会默认载入当前目录的webpack.config.js
文件。
其它
vue-router懒加载
单页面应用,如果没有应用懒加载,第一次进入时,需要加载的内容过多,会出现长时间的白屏,不利于用户体验,运用懒加载则可以将页面进行划分,需要的时候加载相对应的页面,可以有效减少第一次加载的压力和用时。
router文件夹下的index.js原路由加载
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
修改为懒加载
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: resolve => require(['@/components/HelloWorld'], resolve)
}
]
})
配置sass及屏幕适配
配置sass
1.安装sass-loader及node-sass
npm install sass-loader node-sass --save-dev
2.使用
在.vue文件中的style中添加 lang='scss',例如
<style scoped lang='scss'>
$t-base:#32ba90;
.wrap{
color: $t-base;
}
</style>
移动端---屏幕适配
1.在src文件夹中新建一个文件夹styles,并新建两个scss文件 --- mixin.scss / reset.scss
mixin.scss
$SCALE: 10;
$BASE: 375 / $SCALE;//375为设计图尺寸
// 超过显示省略号
@mixin ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
//多行文本,超过显示省略号
@mixin moreLine($num){
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: $num; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
}
@function rem ($px) {
@return ($px / $BASE) + rem
}
reset.scss
@import './mixin.scss';
$size_small:rem(12);
$size_middle:rem(14);
$size_default:rem(16);
$size_big:rem(18);
$text_color: #666;
$bg_color: #32ba90;
$border_color: #dedede;
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, em,textarea, button, input, select, figure, figcaption {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
border: none;
font-weight: normal;
font-family: PingFangSC-Light,helvetica,'Heiti SC';
box-sizing: border-box;
font-size: 14px;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing: antialiased;
&:hover{
outline: none;
}
}
a, a:visited {
text-decoration: none;
color: #333;
}
input:focus {
outline: none;
border: none;
}
html, body {
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased;
background: #fff;
color: #333;
padding: 0;
margin: 0;
}
// 禁止用户选中
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-webkit-scrollbar {
display: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{ /*最简方式*/
content: '';
display: block;
clear: both;
}
.clearfix{ /*兼容 IE*/
zoom: 1;
}
2.在App.vue文件中设置html的font-size
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
name: 'App',
mounted () {
// 设置html的font-size
document.addEventListener('DOMContentLoaded', function () {
const html = document.querySelector('html');
html.style.fontSize = window.innerWidth / 10 + 'px';
});
}
}
</script>
3.mixin.scss则需要在所需的.vue文件中的style中引入,例如components中的HelloWorld.vue
<style scoped lang='scss'>
@import '../styles/reset.scss';
/*可使用mixin和reset中的变量及方法*/
</style>
数据请求axios
1.安装axios
npm install axios --save
2.在src文件夹中新建api文件夹,并新建index.js文件
import axios from 'axios';
var qs = require('qs');
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = ''; //''里面填写请求域名
}
import VueRouter from 'vue-router';
//get请求方式
export const home = () => {
return axios.get('/api/index');
}
//post请求方式(包含参数)
export const article = (id)=>{
const params = qs.stringify({'id':id});
return axios.post('/api/article', params);
}
3.调用接口
<script>
import {home} from '@/api';//引入
export default {
data () {
return {
}
},
mounted () {
const self = this;
home().then(r => {//调用接口
let res = r.data;
console.log(res)
});
},
}
</script>
Toast提示
[图片上传失败...(image-ab3c39-1556106279855)]
1.创建一个普通的Toast提示组件
src/components/toast/index.vue
<template>
<div v-if="showToast" class="toast" >
<p>{{ toastTitle }}</p>
</div>
</template>
<script>
export default {
data: () => ({
showToast: false,
toastTitle: '',
}),
methods: {
show (params) {
this.toastTitle = params;
this.showToast = true
},
},
watch: {
toastTitle: function(val) {
if (val) {
this.showToast = true;
setTimeout(() => {
this.showToast = false;
this.toastTitle='';
}, 2000)
}
return val;
}
}
}
</script>
<style scoped lang='scss'>
@import '../../styles/mixin.scss';
.toast {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(49, 49, 49, 0.8);
color: #fff;
border-radius: rem(5);
z-index: 999;
text-align: center;
font-size: rem(14);
p{
margin: 0;
padding: rem(4) rem(10);
}
}
</style>
2.将组件注册成为plugin
src/components/toast/plugin.js
import Toast from './index'
export default {
install (Vue, options = {}) {
const VueToast = Vue.extend(Toast)
let toast = null
function $toast (params) {
return new Promise(resolve => {
if (!toast) {
toast = new VueToast()
toast.$mount()
document.querySelector(options.container || 'body').appendChild(toast.$el)
}
toast.show(params)
resolve()
})
}
Vue.prototype.$toast = $toast
}
}
3.在main.js中载入
//toast
import toast from './components/toast/plugin'
Vue.use(toast)
4.在页面中使用
<template>
<div class="wrap">
<button class="btn" @click="showToast">show toast</button>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
showToast () {
this.$toast('toast')
}
}
}
</script>
第一个项目
前言
我这里安装好之后直接就带router
了,对与我这个没入门的人来说有点难度,但我就喜欢迎难而上!
下面所有的介绍都会包含路由了,刚刚开始的时候,会避开路由。
插曲:我的系统是Manjaro
所以我安装了atom
,挺方便快捷的;
创建
vue-init webpack vue_maxzhao
# 一路回车就可以了
cd vue_maxzhao
npm i
查看基础帮助
cat README.md
启动
npm run dev
打开http://localhost:8080文件就会出现默认效果。
测试基础模块语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
文本
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:
略……
本文地址:Vue我的首次遇见
网友评论