Vue全家桶快速开发指南着手与项目

环境配置
- 安装npm
- 安装vuecli4.x
构建项目
- 图形化构建
- 命令行配置
代码目录
vue-router
- 定义组件
- - 组件的作用
  - 如何定义组件
- 在需要他显示的html代码下面声明组件
- 定义路由跳转
- - 声明一个路由
  - 定义路由交互组件
  - 定义路由组件显示位置
  - 通过程序跳转
vue 语法
- v-text和插值表达式
- v-html
- v-on 或者 @
- v-show 和 v-if
- v-bind 或者：
- v-for
- v-model
- 在页面被渲染前调用自定义函数
- 在页面被渲染后调用自定义函数
- .vue文件下引入js代码
- 全局引入jq
axios
- 安装axios和vue_axios
- 引入文件
- 使用
vuex
取消vuecli4.x 严格模式
总结

原先一直都在搞人工智能，突然间稀里糊涂的开始做前端vue了，从着手学习到开始写项目时间只有短短的一天，现在把项目遇到的大部分知识点和开发流程做个小的总结。基本上按照这个套路就可以开发一个中等的项目，希望能帮助到其他的人。

环境配置

安装npm

npm是nodejs的包管理工具，本人使用的是arch系统所以只需要以下命令就可以安装

yaourt -S npm

当然ubuntu安装的命令是

sudo apt-get install npm

安装vuecli4.x

有了npm之后
在终端输入以下命令就可以安装vue脚手架

npm install -g @vue/cli

构建项目

图形化构建

直接在终端输入以下命令就可以打开图形化配置的窗口

vue ui

打开完成后会在终端里显示一个本地服务，用浏览器打开他就可以进行图形化配置了

命令行配置

因为我在本地ui配置的时候图形界面打不开所以我选择的命令行配置
在终端输入以下命令

随便进入一个文件夹输入以下命令便可以进入到vue的构建项目的选项里

vue create 你的项目名

在这里我们选择第二个手动选择组件（按上下方向键切换选项，回车按键选中）选中后我们会进入这样的位置

同样选择上下方向键切换选项，空格键选中
在这里我们选中router和vuex

回车确定

这里问我们是否要安装旧版本的router 我们选择n

在这里推荐选择第三项ESLint+Standard config

第一项

这里问我们设置是要有单独的文件夹还是全写在package.json里
我们选择第一项

这里问我们是否保存预设的组件，我们选择是，这会在之后的项目中加入模板为你提供参考
创建完成项目后我们输入

cd 你刚才的项目名

这样会进入你的项目目录
在这个目录下我们输入

npm run serve

这样会编译并运行项目，之后会在命令行提示两个地址
第一个是你本地的地址
第二个就是你外网地址

随便打开一个网址就可以看到这样的画面

在这里点击about又会变一种样式

这就是我们所谓的前端路由

代码目录

近来之后用vs code打开项目所在文件夹
可以看到以下目录

其中这里主要在意src目录
components是你组件的目录
ruter是前端路由的配置目录
store是状态管理vuex的目录
views是视图目录
main.js是配置文件

vue-router

vue-router是一个vue生态里管理前端路由的一个组件
因为他默认就已经写好了一个前端路由所以我们先来看一下这个

定义组件

组件的作用

组件是干嘛的呢？
组件就是为了方便的进行代码重用而定义的
可以想象是把组件里的html代码插入到需要他的地方

如何定义组件

一个组件呢就是把html代码写在标签里头
如

<!-- 格外注意 这里不支持text标签 text标签全部换成span -->
<template><div class="about"><h1>123</h1><p>abc</p></div>
</template><!-- 注意这里必须有一个回车，而且每一段代码后面都不能有空格出现 -->

把html需要的css文件在main.js里引入就像下面这个样子

import '../static/css/about.css'
import '../static/css/mainstyle.css'

这样我们一个组件就定义好了，那怎么用呢

在需要他显示的html代码下面声明组件

因为vuecli规定的所有页面都是组件，只不过有父与子的区别
所以下面这段代码以父组件为例

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><HelloWorld/><!-- 1 --></div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'//2export default {name: 'Home1S',//3components: {HelloWorld //4}
}
</script>

通常用不同的组件需要改四个地方
位置1:组件插入的位置，标签里的名称必须和2,4相同
位置2:引入组件，注意名称和路径就可以了，名称必须和1,4相同
位置3:名字随便起
位置4:声明组件，多个组件声明用逗号隔开，名称必须和1，2相同
注意事项
这里的script代码必须严格按照
两个空格缩进，
字符串用单引号，
括号附近有空格‘ () ’
运算符附近必须有空格’ + ’
冒号后面要有空格‘: ’
等严格的格式控制

定义路由跳转

声明一个路由

在src/router/目录下有一个index.js文件
打开他
在routes数组后添加一个对象如下

 {path: '/about',//将来这个名称会在导航栏显示，被称之为哈希name: 'About',//随便起但后面会用到component: () => import('../views/About.vue')//跳转组件地址 和前面组件跳转一个样子}

定义路由交互组件

我们这里用
包裹住的所有标签最后都会成为跳转的可交互标签，同时这个标签可以定义样式，（事实上它本身会默认渲染成a标签）如

   <router-link to="/home">Home</router-link> |<router-link to="/about">About</router-link>

定义路由组件显示位置

我们在需要路由转换的位置加上标签即可
如

<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><router-view/></div>
</template>

通过程序跳转

这条命令可以直接跳转到对应的位置

this.$router.push({path: '/home'})

vue 语法

这里的语法和其他开发的形式不太相同但可以看出来大体是相同的

v-text和插值表达式

我们在about.vue文件里实验一下以下代码
注意一定是about.vue别自己建一个就来，这里涉及到组件引用我们之后在说

<template><div class="about"><h1 v-text="a">安琪拉</h1><h1>{{a}}安琪拉</h1></div>
</template>
<script>
export default {data () {return {a: 'hello'}}
}
</script>

说白了就是将v-text属性的标签或者{{}}双括号里引入的变量与数据绑定数据会被实时渲染上去
a可以是列表、对象等等等等、语法按照js语法就可以

v-html

这个组件会把变量当作html代码解析

<template><div class="about"><h1 v-text="a">安琪拉</h1><h1 v-html="a"></h1></div>
</template>
<script>
export default {data () {return {a: '<h1>asd</h1>'}}
}
</script>

v-on 或者 @

绑定事件的组件事件有什么鼠标点击，双击等等等等

<!-- v-on:keyup.enter -->
<template><h1 @click="click">{{a}}</h1>
</template>
<script>
export default {data () {return {a: 1}},methods: {click: function () {this.a = this.a + 1}}
}
</script>

<!-- 回车事件 -->
<template><input type = "text" @keyup.enter="click">
</template>
<script>
export default {data () {return {a: 1}},methods: {click: function () {this.a = this.a + 1console.log(this.a)}}
}
</script>

v-show 和 v-if

这两个标签唯一的不同就是v-if会让代码树消失，v-shou只是不显示

<template><div>`<h1 @click="click1" v-show = a>{{a}}</h1><h1 @click="click2" v-if = b||a>{{b}}</h1></div>
</template>
<script>
export default {data () {return {a: 2,b: 2}},methods: {click1: function () {this.a = this.a - 1},click2: function () {this.b = this.b - 1}}
}
</script>

v-bind 或者：

这个命令可以改变标签的属性

<template><div>`<p @click="click" :id = a >asdf</p></div>
</template>
<script>
export default {data () {return {a: '#naa'}},methods: {click: function () {this.a = 'nav'}}
}
</script>
<style scoped>
#nav {padding: 30px;
}
#naa {font-weight: bold;color: #2c3e50;
}
</style>

v-for

根据数组或者对象个数重复某个标签，同时可以将数据遍历出来

<template><div><h1 @click="click">{{a}}</h1><h1 v-for="(item, name, index) in a" :key = "item">{{item}}{{name}}{{index}}</h1></div>
</template>
<script>
export default {data () {return {a: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'}}}
}
</script>

v-model

双向数据绑定

<template><input type = "text" @keyup.enter="click" v-model="a">
</template>
<script>
export default {data () {return {a: 1}},methods: {click: function () {console.log(this.a)}}
}
</script>

在页面被渲染前调用自定义函数

 methods: {indexs:function(){this.$http.post('{:url("Index/fun")}').then(function(res){this.items=res.data;console.log(res.data);}).catch(function(error){console.log(error);});}},created(){//自动加载indexs方法this.indexs();}

在页面被渲染后调用自定义函数

     methods: {indexs:function(){this.$http.post('{:url("Index/fun")}').then(function(res){this.items=res.data;console.log(res.data);}).catch(function(error){console.log(error);});}},mounted(){//自动加载indexs方法this.indexs();}

.vue文件下引入js代码

<script>
import echarts from "echarts";
export default {name: "Home",data() {return {};},mounted() {this.$nextTick(() => {this.after();});},methods: {after() {}}
};
</script>

全局引入jq

在根目录下的main.js加入以下内容

import jquery from 'jquery'window.jquery = window.$ = jquery

axios

安装axios和vue_axios

输入以下命令安装axios和vue_axios

npm install axios
npm install vue_axios

引入文件

在main.js中加入

import axios from 'axios'
import vueAxios from 'vue-axios'
Vue.use(vueAxios, axios)

使用

将token放置在请求头

config.headers.accessToken = token;

参数模式

this.axios({method: 'post',url: this.$store.state.ApiUrl + '/api/jobpath/getPageList',headers: {'token': ''},params: {}}).then(res => {console.log(res)},res => {console.log(res)})

get和post请求

// 组件中使用get方法
this.axios.get(url, parmas: {a: 1, b: 2}).then(res => {// 成功回调console.log(res)}, res => {// 错误回调console.log(res)})// 组件中使用post方法
this.axios.post(url, {a: 1, b: 2}).then(res => {// 成功回调console.log(res)}, res => {// 错误回调console.log(res)})

vuex

vuex其实就是一个全局组件，无论在那里都可以通过

this.$store.state.xxx

访问储存在里面的状态
Getters：用来从 store 获取 Vue 组件数据。
Mutators：事件处理器用来驱动状态的变化。
Actions：可以给组件使用的函数，以此用来驱动事件处理器 mutations
Vuex和简单的全局对象是不同的，当Vuex从store中读取状态值的时候，若状态发生了变化，那么相应的组件也会高效的更新。并且，改变store中状态的唯一途径就是提交commit mutations。这样便于我们跟踪每一次状态的变化。只要发生了状态的变化，一定伴随着mutation的提交。
剩下的和变量一样

取消vuecli4.x 严格模式

在根目录下创建vue.config.js文件
在文件中输入以下内容

module.exports = {lintOnSave: false,
}

就好了 ok 记得重启项目哦

总结

vue这个东西特别简单，当然刚入门的时候我也踩了不少的坑，不过有了一个系统的架构，学起来其实也就一天就足够了，尤其是资源已经提供了模板的前提下。额外说一句，vuecli的严格模式是可以关掉的，需要的小伙伴们可以去网上查一下

Vue全家桶快速开发指南相关推荐

Vue 全家桶 + Electron 开发的一个跨三端的应用 1
代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
Vue 全家桶 + Electron 开发的一个跨三端的应用
GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...
[在线+源码]vue全家桶+Typescript开发一款习惯养成APP
vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. 源码地址欢迎star 项目演示地址建议直接添加到主屏幕(ios端体验差一些). ...
vue全家桶+Koa2开发笔记(5)--nuxt
1. nuxt项目初始化报错下面是使用 koa 模板方法初始化一个项目,使用该方法需要将 nuxt 的版本降至1.4.2: 官方 https://zh.nuxtjs.org/guide/instal ...
Vue全家桶项目创建指南
切换到要存放项目的目录中,然后使用vue init webpack 项目目录名创建项目 (1)填写项目名然后回车习惯项目名小 ...
vue全家桶+Koa2开发笔记(2)--koa2
1. 安装koa脚手架的时候执行命令 koa2 -e koa-learn 注意要使用-e的方式,才会生成ejs的模板 2. async await的使用方法:存在的意义:提高promise的可读性 ...
vue全家桶+Koa2开发笔记(3)--mongodb
1. 安装 momgodb brew install mongodb 安装成功后执行 which mongod 启动:mongod 2. 下载可视化操作数据库的软件 https://robomongo ...
elemenetui 布局_2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）主页布局开发-Go语言中文社区...
1.引言寒假是用来反超的!一起来学习Vue把,这篇博客是关于项目主页布局,请多指教~ 2.整体布局 3 .主页 3.1 实现基本的主页布局 3.2 美化主页的header区域 3.3 实现导航菜单的 ...
2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）商品分类篇
文章目录 1.引言 2.商品分类篇 2.1 通过路由加载商品分类组件 2. 2 绘制商品分类组件的基本页面布局 2.3 调用API获取商品分类列表数据 2.4 初步使用vue-table-with-t ...

Vue全家桶快速开发指南