vue使用笔记一

1.vue-cli安装

sudo npm install -g @vue/cli

2.查看是否安装成功

vue --version

3.创建项目

vue create hello-world

4.启动项目

cd hello-world

yarn serve

 

 

yarn global add 后无法找到命令

http://www.easysb.cn/index.php/2017/06/04/11/

首先，先查看一下yarn的bin目录，输入yarn global bin，如下图：

然后将该路径加入到path中，对于windows中直接将该目录加入到path中，如下图所示：

 

 

框架使用：

pc端界面 elementui/mintui

mobile界面 vux

 

 

项目使用

vue-cli , nginx,git,gitlab, jenkins

 

git 使用

一般来说，git 项目会分成 master、develop、feature、hotfix 这几种分支类型:

mater 为主分支，主要用于发布，代码永远处于稳定可产品化发布的状态。

develop 为开发分支，主要记录开发状态下相对稳定的版本。

feature 为功能分支，从 develop 上拉取代码，开发完成后再合并到 develop 分支上。经

常用于一个大版本 develop 拆分成几个 feature 的场景，便于多个开发人员在同一版本迭代中 开发各自不同的功能点，避免代码冲突，在开发完成后再合并到 develop 分支中进行测试。

hotfix 为紧急线上修复分支，需要从 master 上拉取分支进行 bug 修复，修复完成后分 别并入 master 和 develop 分支。

 

 

nginx配置多个站点

https://www.cnblogs.com/Erick-L/p/7066564.html

 

nginx 配置

• 在Nginx配置目录下，创建一个”vhost”目录。本例假设Nginx是默认安装，配置目录在”/etc/nginx”

$ sudo mkdir /etc/nginx/vhost

• 创建siteA的配置文件

$ sudo vi /etc/nginx/vhost/vhost_siteA.conf

• 输入以下配置信息

server { listen 80; # 监听端口 server_name www.siteA.com siteA.com; # 站点域名 root /home/user/www/blog; # 站点根目录 index index.html index.htm index.php; # 默认导航页 location / { # WordPress固定链接URL重写 if (!-e $request_filename) { rewrite (.*) /index.php; } } # PHP配置 location ~ \.php$ { fastcgi_pass unix:/var/run/php5-fpm.sock; fastcgi_index index.php; include fastcgi_params; } }

• 同siteA一样创建siteB的配置文件，两者仅有的不同是”server_name”和”root”目录

$ sudo vi /etc/nginx/vhost/vhost_siteB.conf

server { ... server_name www.siteB.com siteB.com; # 站点域名 root /home/user/www/forum; # 站点根目录 ... }

• 打开nginx.conf文件

sudo vi /etc/nginx/nginx.conf

• 将虚拟目录的配置文件加入到”http {}”部分的末尾

http { ... include /etc/nginx/vhost/*.conf; }

• 重启Nginx服务

$ sudo service nginx restart

• 现在访问www.siteA.com和www.siteB.com，你将发现浏览器会打开不同的站点

 

 

 

vue 中的: 等于v-bind

vue 中的@等于v-on

vue中的 :src="" 冒号说明后面是一个表达式值

 

<a v-bind:href="url"></a>等价于 <a :href="url"></a>

<button v-bind:disabled=""></button> 等价于<button :disabled=""></button>

<a v-on:click=""></a>等价于<a @click=""></a>

<input type="text" v-bind:model=""/> 这是一个双向绑定, 简写为 <input type="text" :model=""/>

 

关于verbose 这个音讯通常指输出显示更详尽开关

 

 

vuex

mutation必须执行同步

action可以执行异步( 提交一个mutation,可者请求ajax数据等)

 

store中的 state 存储的是全局变量，如果变化，全部组件都可以接收到。

 

因此，在项目开发过程中，请考虑使用组件中的method直接更新组件中的data ,不要使用 actions去修改state

 

vuex是什么

vuex是状态管理，相当于为所有组件都加上了一个store属性,组件中可以通过this.$store进行获取

store中 包括 state , mutation, actions

 

使用vuex以后store中的变化情况

组件通过mapGetter与mapState进行转换/mapMutation进行转换

actions ->转换到组件里的->methods

state ->转换到组件里的->computed 属性 (计算属性)

mutation->转换到组件里的->methods

 

可以这么解释 action实现一些异步的调用,而mutation实现非异步的调用

也可以全用action ,只不过action里调用了mutation

 

事件调用情况

action 可调用 dispatch 触发下一个 action

action 可调用 commit mutation 触发mutation，而后mutation 进行state修改

 

router是什么

router是路由,相当于为所有组件都加上了一个 router属性,组件中可以通过this.$router进行操作

路由有 静态路由，动态路由，编程路由，嵌套路由

路由形式 hash/history 等

 

vue 是什么

vue 包括 template/scriopt/style 三者可以写到一块 MVVM框架

它有 data,method,computed

 

vue-cli 是什么

创建vue项目模板的工具,类似于通过maven 创建java项目模板，但不具备包管理工具。

包管理功能通过npm或yarn实现

vue-cli 可以编译、启动、调试 vue项目。

 

目前项目中使用 vue2.0和vue-cli2.0

 

 

开发项目中可以先定义全局state ，确认哪些是需要全局state，哪些是组件中的data，

 

 

 

vue组件基本结构

var vm = new Vue({

name:'root',

el:"#app",

// 数据

data: { a: 1 } / Function, // data类型根实例为Object，组件中为Function

props:[]/{}, // 设置父组件传递给子组件的数据限制

computed:{}, // 计算属性

watch:{}, // 监控属性

methods:{}, // 事件操作

// 资源

directives:{}, // 内部指令

filters:{}, // 内部过滤器

components:{}, // 内部组件

// 生命周期：实例创建 => 编译挂载 => 组件更新 => 销毁

beforeCreate(){

console.log('beforeCreate ==> 实例创建')

},

created(){

// 可以操作data, 但未生成DOM（未挂载）发起异步请求，初始化组件状态数据 data

console.log('created ==> 实例创建完成，属性已绑定')

},

beforeMount(){

console.log('beforeMount ==> 模板编译/挂载之前')

},

mounted(){

// 已生成DOM到document中，可访问this.$el属性

console.log('mounted ==> 模板编译/挂载之后')

},

beforeUpdate(){

console.log('beforeUpdate ==> 组件更新之前')

},

updated(){

// 操作DOM $('#box1')

console.log('updated ==> 组件更新之后')

},

activated(){

// 操作DOM $('#box1')

console.log('activated ==> 组件被激活时（for keep-alive组件）')

},

deactivated(){

console.log('deactivated ==> 组件被移除时（for keep-alive组件）')

},

beforeDestroy(){

// 解除事件绑定，销毁非Vue组件实例等 如：this.$off('event1') select2.destory()

console.log('beforeDestroy ==> 组件销毁之前')

},

destroyed(){

console.log('destroyed ==> 组件销毁之后')

}

})