- 什么是vue
Vue是一套用于构建用户界面的渐进式框架,那么我们如何理解,渐进式框架呢。 打个比方,就好比堆积木,用到哪一块就搭建一块, 可能我们现在,在公司开发的时候一上来就是vue全家桶(vue+vueRouter+vueX)配合elementUi Vant什么的,其实我们根据不同的使用场景,来选择使用,比如说直接在页面 像引入jq 那样引入vue 紧紧将vue当作一个视图来使用。当然也可以选择直接vue全家桶搭建一个前端项目。
Vue.js 可以说是MVVM 架构的最佳实践
- 什么是mvvm架构
MVVM 是Model-View-ViewModel 的缩写 view ---视图层(用户界面) 、 model ---数据层(存储数据及业务逻辑)、viewModel 是一个同步View 和 Model的对象, mvvm架构的核心就是数据双向绑定, v层与m层是没有直接交互的,当v层或者m层有任意变动时,都会反映到vm层,而vm层保证了v层与m层的一致性。优点, 低耦合,可重用性,独立开发,可测试,数据驱动
我们可能知道一些其他的模式 mvc mvp 等等 这种 m-v-x 的 x模式的不同,其实就是M与V 的数据传递的流程不同,拿mvp模式举例, p--Presenter(展示器) 这p层用来调用业务逻辑、响应数据、响应用户动作,这种模式的优点 低耦合:他同样切断了v层与m层的联系, 减少了需要维护的对象,这种模式在业务越来越繁重的时候,也造成代码越来越冗余,而MVVM不仅简化了业务与界面的依赖关系,还优化了数据频繁更新的解决方案,但是这也并不是说mvvm一定优于mvp这种模式 在不同的业务场景中根据业务的复杂度,我们可以选择传统的js jq库类型的开发,也可以使用vue 这种mvvm架构来进行前端项目项目的搭建 (个人中心代码进行举例)
- 使用vue cli搭建一个项目
搭建前的准备: 下载nodejs(nodejs 自带npm) 并安装 ,同时熟悉 js es6的基础,简单了解node.js 和 webpack,之后就可以根据官网步骤快速搭建项目了。
我们也可以使用cnpm(淘宝镜像)使用方法与npm 基本一直,优点 国内速度可能要比npm快, 而且在install的时候 npm可能会出现问题 改用cnpm 有时候会解决
npm i -g cnpm --registry=https://registry.npm.taobao.org
1.创建项目
vue create vue2e01
Default ([Vue 2] babel, eslint) -- 默认vue2
Default (Vue 3 Preview) ([Vue 3] babel, eslint) -- 默认vue3
Manually select features 自定义
2.选择自定义
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 空格 ==>选择 a ==> 全选 i ==> 反选
>(*) Choose Vue version
(*) Babel 转码 将es6转成es5
( ) TypeScript js的超集 ts可以理解为强类型
( ) Progressive Web App (PWA) Support 渐进式Web应用程序
( ) Router vue路由
( ) Vuex 状态管理
( ) CSS Pre-processors CSS 预处理器(如:less、sass
(*) Linter / Formatter 代码风格检查和格式化
( ) Unit Testing 单元测试
( ) E2E Testing (end to end) 测试
3.选择vue 版本 vue2
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x (Preview)
4选择路由的模式 n
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 直观区别 url hash带# history不带 而且history 需要后台配合
5.选择css预处理器
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass) 保存后生效
Sass/SCSS (with node-sass) 实时编译
Less
Stylus
6.代码验证规则 ESLint + Prettier (个人常用)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
7.代码规则检测
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save 保存
( ) Lint and fix on commit (requires Git)
8.存放位置
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files 单独文件
In package.json json里
9.是否记录配置
? Save this as a preset for future projects? (y/N)
- vue.config.js
vue.config.js 是一个可选的配置文件, 让我们进行一些个性化设置。
var path = require('path');
function resolve(dir) {
console.log(__dirname);
return path.join(__dirname, dir);
}
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //后端或者运维把你打包后的文件部署到服务器上时的路径, 会影响到资源的路径,合理的使用<%= BASE_URL %>
filenameHashing: true, //文件名hash值 以public里面的静态资源和assets里面的静态资源举例,如果重名 会覆盖.
assetsDir: './static', //静态资源输出目录
chainWebpack: (config) => {
config.resolve.alias //路径别名
.set('@', resolve('./src'))
.set('@assets', resolve('src/assets'))
.set('components', resolve('./src/components'))
.set('utils', resolve('./src/utils'))
.set('img', resolve('./src/assets/img'))
.set('images', resolve('./src/assets/images'))
.set('json', resolve('./src/assets/json'));
},
css: {
extract: true,
sourceMap: true,
},
devServer: { //代理
port: 8080,
// open: true, //配置自动启动浏览器 http://2a0924x410.51mypc.cn:13462/mock/35/so/getListByChanneType
proxy: {
'/uirbScreen': {
target: 'http://10.1.12.61:8101', //后端ip地址及端口'http://192.168.2.131:8088', //
ws: true, //是否跨域
changeOrigin: true,
pathRewrite: {
'^/uirbScreen': '',
},
},
},
},
};
- public文件资源 及一些静态资源引用
public文件夹下的资源在打包时会被复制一份,放到静态资源输出目录. 在需要使用静态资源目录里的文件时 不要直接写死路径 尽量使用process.env.BASE_URL.
在使用一些静态资源时 搭配别名使用 在模板中 如果有字符@.. 可以不加~ 如果没有必加, 在css中使用必须加~
<div class="home">
<img alt="Vue logo" src="@/assets/img/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<img :src="`${baseUrl}static/img/logo.png`" alt="" />
<img :src="testImg" alt="" />
<!-- <div class="pp"></div> -->
</div>
</template>
<script>
// @ is an alias to /src
import logoImg from 'img/logo.png';
import HelloWorld from '@/components/HelloWorld.vue';
export default {
name: 'Home',
components: {
HelloWorld,
},
data() {
return {
baseUrl: process.env.BASE_URL,
testImg: logoImg,
};
},
mounted() {
console.log(this.baseUrl);
},
};
</script>
<style scoped>
.pp {
background: url('~img/logo.png') no-repeat;
width: 100px;
height: 100px;
}
</style>
- 插件安装及axios封装
根据elemengui官网 进行插件安装及引用, axios封装项目文件
- 一些较实用的功能
命名嵌套视图
router
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
// cimport header from '@components/header.vue';
// const Home = require('../views/Home.vue')
const header = require('@components/header.vue').default;
const left = require('@components/left.vue').default;
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue'),
// redirect: '/about/children',
children: [
{
path: '/about/children',
components: {
default: () => import('../views/AboutC.vue'),
header,
left,
},
},
],
},
];
const router = new VueRouter({
routes,
});
export default router;
组件
<template>
<div class="about">
ppap
<router-link to="/about/children">AboutC</router-link>
<router-view name="header"></router-view>
<router-view name="left"></router-view>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
};
},
};
</script>