一个小的V项目框架

最新推荐文章于 2024-04-01 01:20:41 发布

fang_ze_zhang

最新推荐文章于 2024-04-01 01:20:41 发布

阅读量599

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/fang_ze_zhang/article/details/82999745

Vue 专栏收录该内容

5 篇文章

订阅专栏

很长时间没用Vue了，写个小的项目总结下，当然只是随手写的小东西，没有ajax，没有proxy。

项目结构：

src
    assets
       ...
    components
        ...
    static
        ...
    App.vue
    main.js
    routerConfig.js
index.html
package.json
webpack.config.js

简单解释下：
App.vue是入口文件，里面有还有些其他组件；
main.js里面，创建一个Vue对象，引入App组件(render: h => h(App) 也可以写成 components: { App })，
引入路由配置文件routerConfig.js；
routerConfig.js里面通过Vue.use(VueRouter)来安装路由插件，并对路由进行配置。
主要就是这三个文件，其余组件进行补充。

1.简单的webpack 配置

entry: 入口文件；
output: 出口文件；
__dirname: nodejs系统级别的变量，表示当前目录；
process.env: process是nodejs的一个全局变量，process.env返回一个包含用户环境信息的对象；
if判断，当生产环境时，使用另一套配置方案；
简单配置没什么好说的。

2.路由

路由配置在routerConfig.js里面，要使用路由，首先需要安装路由插件Vue.use(VueRouter)，然后在跟组件(main.js)里注册；
切记routes数组里面对象的参数是component，没有“s”，若是加了“s”会报错；
<router-link>点击导航，通过to属性指定目标地址，当然Vue实例内部也可以通过this.$router.push(...)进行导航；
<router-view>渲染路径匹配到的视图组件；
嵌套路由写法类似，这里就不多说了。

3.Vuex

同样需要先Vue.use(Vuex)，然后在跟组件里注册，这样子组件就可以通过this.$store访问到；
一个简单的状态存储，由于action可以异步操作，这里通过setTimeout模拟异步，使用了Promise来组合多个action，
所以点击1s后+101执行的操作是先执行+1操作，完成后再执行+100操作。

git地址: https://github.com/fangzezhang/vue-analy