故事前传
大概是1个月以前 临时接到通知 客户指定vue框架做微信公众号页面 公司询问了一圈发现根本没有大佬可以依靠 而我并不是个专业的前端开发师 从此开始了漫长的爬坑之路。
初次接触Vue
附赠官方链接Vue.js和Vue的样式参考标准Element
作为近几年较火的3个前端框架之一的Vue，个人认为并不适合一个前端初学者去接触 除非有了比较扎实的h5、c3、js的基础功底，还好之前有接触过一些应用jQuery、angular技术的项目 让我在理解的时候不至于那么费劲，可是也是受jQuery的影响，习惯于操作dom的思想严重阻碍了理解Vue组件式的设计思维。
一、vue-cli项目初建
要确保电脑里有配置安装node环境 因为我用的是mac系统所以在终端敲以下命令就可以完成node环境搭建了（其实node环境是公司里一个小哥哥给我装的）
1、卸载node相关：sudo rm -rf /usr/local/{lib/node{,/.npm,_modules},bin,share/man}/{npm*,node*,man1/node*}
2、安装brew命令：ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"
3、安装node：brew install node
安装好node环境后 就可以安装这个vue-cli的东东了
$ npm install -g vue-cli
$ vue init webpack lm-weixin
$ cd lm-weixin
$ npm install //安装
$ npm run dev // 运行
$ npm run build // 打包
二、项目包结构
build/
百度说 此目录包含开发服务器和生产webpack构建的实际配置。我根本没动过这个包里的任何一行代码，所以不知道具体的细节情况
config/
这是显示构建设置的一些最常见配置选项的主配置文件。index.js这个是主要配置文件，通常的服务端口配置 代理配置 包括打包的一些个性化设置都是更改这个文件的属性
src/
这是应用程序代码所在的位置。我在里面创建了components包utils包lib包api包assets包以便满足我项目的文件结构需求。同时在main.js里面配置了vue的路由
static/
百度解释：是不想使用Webpack进行处理的静态资源的一个逃生舱口。 它们将直接复制到生成webpack建立资产的同一个目录中。
反正我是把项目里面需要用到的静态图片扔进去了
test/
包含单元测试相关文件
index.html
这是我们的单页应用程序的模板index.html。 在开发和构建期间，Webpack将生成资产，并将生成的资产的URL自动注入到此模板中以呈现最终的HTML。
package.json
包含所有构建依赖项和构建命令的NPM软件包元文件。
三、项目编写
项目整体编写风格遵照着
<template>
<子组件></子组件>
<div></div>
<子组件>
</template>
<script>
import ** from ****
export default {
components:{
别称: **//import导入项
},
data(){
return {
需要的参数
}
},
methods: {
function1(){},
function2(){},
...
},
mounted(){
//具体查看Vue的生命周期钩子的用法 ，官方给出的所有用法在下方，我只用到了其中的mounted
生命周期钩子
}
}
</script>
<style>样式</style>的结构进行编写
四、项目难点
父组件和子组件的通信方式是困扰了我很久的问题 至今只能熟练的写出父组件给子组件传值，子组件与父组件之间的沟通依然没有理解 “this.$emit” 是如何操作的。
小结
这次项目已经进行到尾声了 但依然是个vue的初学者 依然有很多效果无法达到客户的要求。想着以后继续接触vue这个框架的机会不多 就先凭着学习的记忆把所了解到的一些东西记录下来留作纪念了 或许有理解的不对的地方欢迎大家指出。感谢从零开始搭建VUE项目 - 前端-陈泽锋 - 博客园的帮助。
网友评论