Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
准备
技术栈
- Html+css+javascript
- webpack
- ES6基本语法
- Vue
- vue-router 路由
- axios 网络要求
- Vuex 状态管理
- scss css预编译
1、创建第一个Vue项目
(一)要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等。
步骤:https://nodejs.org/en/download/ node官网,选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可。安装好nodejs和npm,然后输入下面的cmd命令查看是否安装好
node -v 查看nodejs版本
npm -v 查看npm版本
这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像cnpm:
输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装cnpm淘宝镜像安装相关依赖,以后再用到npm的地方直接用cnpm来代替就好了 。
(二)安装vue-cli脚手架构建工具,输入命令cnpm install -g vue-cli 安装完成即可。使用命令 vue -V 测试是否安装成功。
(三)安装完脚手架以后,选定路径(这里我选择e盘下VUE文件夹),新建一个vue项目 vue_project 。
最后一项我选择是No,I will handle that myself ,手动安装依赖。
出现以下内容表示vue项目创建成功。
进入可以看到如下文件目录。
cmd进入项目,下载依赖: npm install 或者cnpm install 推荐使用cnpm install
依赖下载完成后,项目中会多出一个node_modules文件夹。
运行项目: npm run dev
出现以下提示信息表示运行成功。
这样就算Vue项目构建成功了,在浏览器中输入http://localhost:8080 就可以看到这个页面。
2、Vue项目的目录结构分析
这里,为大家简单介绍以下项目的目录结构,首先,看一下整体项目目录结构的截图:
从最外层说起(根目录文件):
1. babelrc:作为项目babel的配置文件(Babel 是一个 JavaScript 编译器,作为我们项目对js的编译),可以将我们项目es5以上的语法编译成大多浏览器都支持的es5语法等功能,还可以在这里配置一些框架的按需加载(如element-ui)
2. .editorconfig:项目中编辑代码风格
3. .gitignore : 用于git的忽略文件配置(我们使用git提交的时候,有些文件是不需要提交的,如node模块的node_modules文件夹、打包成功的dist文件夹等)
4. .postcssrc.js: 用于对style的less语法支持配置
5. index.html: 项目的首页,即我们编写的代码会通过这个文件显示给浏览器
6. package.json package-lock.json: 这个就不用多说了吧,大家都懂是项目包的依赖文件 7. README.md: 展现在GitHub上的描述文件
build文件夹
1. build.js: 作为项目打包的时候(npm run build)的入口文件,通过这个js将整体项目打包
2. check-versions.js:用于版本node和npm版本的检测
3. utils.js:用于项目中关于loader器的引用和项目title、icon等设置
4. vue-loader.conf.js:因为项目是基于vue的,所以,需要一个vue-loader来识别.vue后缀的文件,这个文件,就是vue-loader的配置文件
5. webpack.base.conf.js:项目webpack的基础配置文件
6. webpack.dev.conf.js:开发环境下的webpack配置文件
7. webpack.prod.conf.js:生产环境下的webpack配置文件
config文件夹
1. dev.env.js、prod.env.js:用于配置项目的环境变量
2. index.js:用于webpack的一些配置信息
node_modules文件夹
这个文件夹就不多说了,是项目包存储的地方
src文件夹
这个文件夹内,就是我们真正项目代码的存储地址
1. assets文件夹:这里放置项目的模块静态资源,如css,js还有图片、字体
2. components文件夹:使用vue的都知道,vue是模块化的框架,我们将页面中的元素分模块编写,从而提高代码修改的方便性以及重用的效率,这个文件夹内就是我们项目的模块存放地址
3. router文件夹:vue-router让我们能处理vue的路由,从而更佳的使用component,这个文件夹内就是个vue-router的配置文件
4. APP.vue:作为项目的根组件,也就是我们直接吧这个组件装到index.html中进行渲染
5. main.js:作为webpack项目的入口文件,在这个文件夹内,我们是可以引用静态资源以及对整体vue的配置
static文件夹
用于存放在整体项目的静态资源,如图片,字体等
3、src文件夹目录初始文件夹的结构关系
1.main.js
main.js主要创建Vue实例,使路由router文件和总组件App结合起来,具体代码作用见下图
2.index.js
index.js是路由文件夹router下面的默认路由文件,具体代码作用见下图
3.App.vue
App.vue就是main.js里的App,当路由文件根据路径匹配到组件时,将组件渲染到<router-view/>标签所在的位置
4.HelloWorld.vue
HelloWorld.vue可以作为特定功能的组件,App.vue这样的组件可以作为固定的内容,比如页面导航栏之类的
文件路由图