开始用 vue 框架的时候,我只会
<script src="js/vue.min.js"></script>
然而这种方式可能比较适合入门和熟悉 vue,要进行开发的话还是要使用 vue 的官方命令行工具 vue-cli。
检查 node 和 npm 版本
第一次安装 vue-cli 要检查 node 和 npm 的版本,node 要 4.0 以上,npm 要 3.0 以上(node 和 npm 的安装就略过了)。
node -v
npm -v
如果不是所要求的版本需要升级,可参考:升级node.js和npm
全局安装 v-cli
npm install -g vue-cli
初始化
vue init <template-name> <project-name>
template-name 是 vue 提供的官方模板,这里我们使用的是 webpack 打包工具。可以使用 vue list 命令查看所有可用的官方模板。
vue init webpack vue-demo
然后会有一些选项:
vue 初始化选项选项 | 描述 |
---|---|
Project name | 项目名称 |
Project description | 项目描述 |
Author | github 用户名 |
Vue build | 构建方式(独立构建、运行时构建,默认为独立构建) |
Vue-router | vue 路由,其实并不建议第一次用 vue-cli 的时候使用 vue-router,因为自动生成的项目会变得有些复杂,不好分析,后面用到的时候可以再安装 |
ESlint | js 的代码检查工具,默认为 standard 标准安装 |
unit tests(Karma+Mocha) | 单元测试,暂时忽略 |
e2e tests(Nightwatch) | 端到端测试,暂时忽略 |
然后进入文件夹,安装依赖,运行项目
cd vue-demo
npm install 安装所有依赖
npm run dev 运行
然后浏览器会自动打开 http://localhost:8080/,你就可以看到如下图所示的页面了。
到此为止,一个 vue 项目就基本搭建好了。
分析项目目录结构
接着我们来分析一下项目的目录结构:
文件目录结构文件 | 描述 |
---|---|
build 和 config | webpack 配置相关文件 |
node_modules | 通过 npm install 安装的依赖代码库 |
src | 存放项目源码(开发的所有代码) |
static | 存放第三方静态资源 |
.babelrc | babel 的一些配置,babel 的作用是将 ES6 转换成 ES5 |
.editorconfig | 编辑器的配置(编码方式,缩进风格等等) |
.eslintignore | 不对这些文件做语法检查 |
.eslintrc | eslint 的配置,在这里你可以改变默认的一些代码风格,比如句末分号等等 |
.gitignore | 上传到 git 仓库时,忽略这些文件 |
.postcssrc.js | 加载配置文件 |
index.html | 项目的入口 html 文件 |
package.json | 包管理 |
README.md | 项目说明文件 |
接着我们可以分析一下与界面直接相关的文件与代码。
先看主目录下的入口 html 文件:index.html
index.html发现只有一个 id 为 app 的 div,接着看 src 文件夹中的项目代码:
src 文件目录- assets 文件夹中存放的是一些静态资源文件,这里只放了一张 logo
的图片。 - components 文件夹存放的是组件,在 vue 中一个组件对应就是一个 .vue 文件,可以看做是 html 标签的拓展与复用,这里只有一个 hello.vue。
- App.vue 这是整个页面的 vue 实例。
- main.js 是项目的入口 js 文件。
先看 main.js 入口文件:
// 使用 import from 的方式加载模块或组件
import Vue from 'vue'
import App from './App'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app', // 挂载到一个 id 为 app 的元素上(见index.html)
template: '<App/>', // 渲染组件
// components 用来注册组件
components: { App } // 引入的组件
})
可以发现,main.js 引入了主实例 App.vue,并渲染到 index.html 上。
然后再看 App.vue:
<template>
<div id="app">
![](./assets/logo.png)
<hello></hello><!-- 使用 hello 组件 -->
</div>
</template>
<script>
// 引入了 hello 组件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
...
</style>
我们发现在 App.vue 中引入并使用了 hello 组件,至此还没发现任何与看到的页面相关的内容,怀着终于走到终点的心情打开了最后一个文件,惊觉原来如此,所有的东西都在这啊。
总而言之,我们在页面上看到的内容(除图片外)都是在 Hello.vue 这个文件定义的,作为一个可以重复使用的组件,被引入了 App.vue 这个实例中,App.vue 这个组件可以看做整个项目的主实例,而 App 这个组件又是通过 main.js 初始化并挂载到 index.html 中渲染的,至于说为什么没有 <script> 这样显式关联的语句,就是 webpack 的功劳了。
网友评论