现在web开发应该是很火的. 随着前端技术的成熟, 手机性能提升. webApp 已经越来越接近原生体验.
原生开发也应该掌握混合开发的能力,毕竟现在多数公司都要求hybrid开发经历.(好好中文不用,非要hybrid)
因为公司项目Vue用的比较成熟, 跟着学习了一波
一 配置必要环境
学习任何一门语言官方资料永远都是最重要,也是必须要了解的 Vue官网
官网提供了教程和各种学习实例.有经验的可以在官网学习.
Vue.js. 看名字就知道是JavaScript框架. 需要node.js支持.
打开终端 执行命令 npm -v
Ym:~ shinho$ npm -v
5.6.0
Ym:~ shinho$ 如果电脑安装了node.js,会显示当前使用的node.js版本. 如果没装会提示 npm command not found. 那就去安装node去吧
由于天朝 墙 的存在,有些资源会被屏蔽或者下载贼慢.最好给npm切换淘宝镜像源 cnpm
执行命令 npm install -g cnpm --registry=http://registry.npm.taobao.org 即可
Ym:~ shinho$ npm install -g cnpm --registry=http://registry.npm.taobao.org
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ [email protected]
added 21 packages, removed 29 packages and updated 75 packages in 43.764s
Ym:~ shinho$ 万事俱备,准备撸Vue
这个不得不提vue脚手架. vue-cli (这个是官网推荐的快速构建Vue应用脚本,但是不推荐新手直接通过脚手架创建Vue应用)
执行命令 npm install --global vue-cli
完事之后 现在vue 所有的准备工作就OK了.
查看Vue版本 Vue --version
二 创建Vue应用
选择一个目录,准备创建应用. 比如某个路径的VueDemo文件夹
cd 到这个文件夹. 执行
vue init webpack firstVue
Ym:~ shinho$ cd /Users/shinho/VueDemo
Ym:VueDemo shinho$ vue init webpack firstVue
? Project name demo
? Project description vue 应用demo
? Author shinho <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
❯ Yes, use NPM
Yes, use Yarn
No, I will handle that myself 按照提示 逐步执行即可. 最后一步使用 use NPM.
接下来就会开始配置这个 Vue应用了
配置完之后. cd 到应用目录
执行 npm run dev. 然后就可以看到第一个vue应用启动成功了
Ym:vuedemo shinho$ cd firstVue/
Ym:firstVue shinho$ npm run dev
> [email protected] dev /Users/shinho/VueDemo/firstVue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting b
DONE Compiled successfully in 2615ms 18:43:56
I Your application is running here: http://localhost:8081