Vue 学习笔记 -- 项目搭建
目前只是一个前端小白, 之前也只是工作需要粗略接触过AngularJS,对于前端框架的认知只是做数据绑定和模块化组件。用AngularJS写的代码也不过就是往HTML里添加css, 添加业务逻辑,项目结构就是这样(历史遗留项目)
MyProject/ common/ css/ i18n/ js/ index.html
因为周围也没有这方面的前辈可以学习,只能这样闭门造车,但是总觉着这样写的代码并不够elegant,直到有一天,偶然看到了一份Vue的项目代码,看到项目结构的时候,我就觉得这TM才是项目该有的样子, 学就完了!!!
![f658c2e1bd64424fbc3e6de8e8b6e11f.png](https://i-blog.csdnimg.cn/blog_migrate/f2e1cbb591902e58f8a01ca33e6a12cf.jpeg)
学习之前,首先就是要搭建环境了。。。
Node.js
之前写的前端是没有用Node.js的, 引入Node.js可以让前端的项目更工程化,何况还有npm这么好的生态,为何不用呢
Package.json
首先,Node.js的项目遵循着模块化的原则, 模块是一个库/框架,同样也是一个Node.js的项目。当创建了一个Node.js项目时,也就相当于创建了一个模块。而package.json就是这个模块的描述文件。它定义了项目的一些基本属性和所有依赖模块的属性。
最基本的package.json 可以通过npm init来创建,就相当于创建了一个Node.js的项目
![1f02c9dc93c693aa51586bb3254f3c63.png](https://i-blog.csdnimg.cn/blog_migrate/c45a6fd832b4c0d66ce6ff0b350e4666.jpeg)
一般来说,package.json中还包含dependencies和devDependencies两个属性,用于记录生产和开发环境所依赖的模块的列表, 这些模块会被安装在./node_module目录下
npm 用法
- 安装模块 本地安装 npm install 全局安装 npm install -g 特定版本 npm install @5.2 记录到dependencies npm install --save or -S 记录到devDependencies npm install --save-dev or -D
- 安装当前目录下package.json中记录的模块 安装所有 npm install 安装dependenciesnpm install --production
- 卸载模块 卸载 npm uninstall 卸载同时删除记录 npm uninstall -S or -D
使用Vue CLI安装VUE
官网是这么描述的:
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统, 提供这个这个,那个那个的功能,咱也看的不是很懂,只关心怎么先创建一个Hello Word的项目
- 安装Vue CLI npm install -g @vue/cli-init
- 创建一个新项目 vvue init webpack hello-word
![29f27bae7a5f19169481f2e9dc5f4f2b.png](https://i-blog.csdnimg.cn/blog_migrate/67f5416da6cf78770c8409665e321af3.jpeg)
我自己是一名从事了多年开发的前端老程序员,今年我花了三个月整理了一份最适合今年学习的前端学习干货,从最基础到高级的各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。