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 后无法找到命令
首先，先查看一下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配置多个站点
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 ==> 组件销毁之后')
}
})
