最近要开发一个网页,放在服务器上作展示用.专门去学个php吧又不值得,而且还要部署,太麻烦.直接用vue,经过webpack打包成静态文件丢给nginx正好,本来也没什么后台功能,真是纯展示用的.正好用vue练手.
环境搭建
- nodejs 7.4.0(看了官网,最新版已经到了7.10.0)
- npm 4.5.0
- vue-cli 2.8.1
- vue 2.3.3
- vue-router 2.5.3
vue-cli
是一个用来搭建项目的工具,用来生成vue项目的一些基本的结构.
首先
npm i vue-cli -g |
安装vue-cli,安装完成后使用
vue init template-name project-name |
来新建项目.比如我用的是webpack,vue init webpack project-name
他会下载模板,然后询问一些设置的问题,如项目名,项目描述,作者等.还会问构建方式,因为我需要输出为静态文件,所以选择了runtime+compiler
,还会询问是否要使用vue-router.回答完所有的问题之后会发现现在的目录下多了一个project-name
的文件夹,就是vue-cli
创建好的项目文件夹.
按照他的提示
cd project-name |
在安装完依赖后就可以看到相应的页面了.
![hello world]](https://ws1.sinaimg.cn/large/bd69bf14ly1ffmycii112j20jr0hfjs9.jpg)
(插了张微博的https的图片,看来是会不会影响小绿锁)
. |
生成的项目结构是这样的. build
和config
分别是与项目构建和设置有关的一些文件.如果没有什么特殊需求的话不需要更改. 我们需要编辑的就是src里面的文件了.其中App.vue
是根组件,现在里面有一个<router-view>
的标签,是后面vue-router
用到的.
vue-router
vue-router的是用来管理spa的路由的.
example:
import Vue from 'vue'; |
跟其他的vue
插件一样,需要Vue.use(VueRouter)
来注册. 引入其他的组件,给每个path指定好相应的组件. 官方文档
其中的store是由于要使用vuex而引入的.
Vuex
vuex是官方提供的状态管理工具.当初没明白这个状态管理工具是怎么个意思,实际用起来才发现,就是当你在不同组件中要使用一份共同的数据的话,就要通过vuex来管理,不然不同组间之间还要emit和on,兄弟组间之间沟通就更麻烦了.
import Vuex from 'vuex'; |
首先仍然是通过Vue.use(Vuex)
来注册插件(如果是在html中直接使用cdn提供的vuex就不需要这一步了,引入的时候会自动进行.)
然后定义一个state
对象,其中是我们需要用vuex来管理的数据.比如我需要储存isLogin
是否登录,auth
认证的token,还有lessons
,这是要上的课程. 除了state
,还有一个是mutations
,要修改vuex中的数据只能通过mutations
或者action
进行mutations
中只能进行同步操作,而action
中只能进行异步操作.我没有用到action的地方.
因为我实际的需求其实修改其中的几个数据,所以两个mutations
其实都只是修改state中的值.