Vue系列(2):Vue 安装

前言:关于页面上的知识点,如有侵权,请看 这里

关键词:小白、Vue 安装、Vue目录结构、Vue 构建页面流程

初学者安装 vue 用什么好
大家都知道,学 Vue 最好还是去官网学,官网写得炒鸡详细,如果你能把官网上的知识点都看完看懂,把上面的例子都敲一遍,你怎么着也算是。。。认识 Vue 了。。。毕竟学会什么的,你总要做个一个完整项目才算吧。

但是!如果你和我一样也是‘傻白甜’的话(那时候我专心学习原生,立志打好基础先,学过node,但是还没用过什么框架,也没用过什么构建工具,什么都懵懵懂懂的),vue 的安装我是不建议你去看官网的,因为我是建议初学者学 vue 的时候,是用脚手架的,一方面在公司搭建 vue 项目时都是用脚手架的,早点熟悉填坑是好事。而且这样你就可以一边学,一边做一个完整的项目出来了。如果从我这一点出发的话,看起来官网也是建议初学者不要在他那里学习安装滴。。。不信你瞅(开玩笑的啦~)

所以我那时候学习用 vue-cli 都是在 菜鸟教程 上学的,因为教程里面有对脚手架构建后的目录结构有做解说,所以对一些没用过 webpack 的初学者很友好。

插段小故事,其实当初,我是怀着一腔热血想要把 webpack 和 vue 一起学了的,最好能一口吃成大胖子,于是我坚决不用 Vue 官方提供的 CLI。先是用一个下午千辛万苦粗略的弄懂了 webpack,搭好了环境,引入了 Vue,安装资源,开始了 <template>,然后就开始报错报错,百度百度,解决解决,最后花了一天终于弄好了,感动到哭!

干货:

  • 学习 webpack 的时候,还是推荐看官网,我当时还一起看了 拥抱webpack——最详细填坑笔记
  • 上面之所以报错呢,是因为 vue 有不同的构建版本,在 webpack 中默认是只包含运行时的版本 (vue.runtime.js),不包含编译器,而使用 template 要用到编译器,所以要在 webpack 配置中引入完整版(vue.js = vue.common.js + compiler.js)。通过这个报错我也深刻的理解了 vue 的不同构建版本。

虽然我花了不少时间,但是觉得学到了挺多的。但是呢初学时浪费的这些时间真的会感觉挫败,觉得自己是没人带的,好惨惨。所以不如脚手架学起来爽。
建议可以先用脚手架把 vue 弄起来,再回过头了解 webpack 和 vue 的不同构建版本就行,人生已经如此的艰难,有些事情能简单点就简单点吧?

回到正题。


1. Vue 安装

1.  全局安装 vue-cli
$ cnpm install --g vue-cli

2.  创建一个基于 webpack 模板的新项目,然后默认一路回车就行
$ vue init webpack my-project
This will install Vue 2.x version of the template.

? Project name my-project
? Project description A Vue.js project
? Author Chayin <chayin@datastory.com.cn>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-project".

   To get started:

      cd my-project
      npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

3. 进入项目
$ cd my-project

4. 运行
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

5. 打开浏览器访问访问 http://localhost:8080/#/,访问结果如下:



2. 目录结构

打开项目目录,可以看到这样的目录结构:


├── build ----------------------------  项目构建(webpack)相关代码,一般情况下我们不需要动
├── config ---------------------------  配置目录,包括端口(8080)等。初学可以使用默认的
├── node_modules ---------------------  npm 加载的项目依赖模块
├── src ------------------------------  这个是我们最应该关注的目录,基本上要做的事情都在这个目录里。
├──├── assets ------------------------  放置一些图片,如网页标题logo等
├──├── components --------------------  放置页面组件
├──├── router ------------------------  路由
├──├── App.vue -----------------------  项目入口文件
├──├── main.js -----------------------  项目核心文件
├── static ---------------------------  静态资源目录。
├── test -----------------------------  初始测试目录,可删除。但是我们一般都是放mock数据的。
├── .xxxx文件 -------------------------  这些是一些配置文件,包括语法配置,git配置等。
├── index.html -----------------------  首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
├── package.json ---------------------  项目配置文件,不解释。
├── README.md ------------------------  项目的说明文档,markdown 格式




3. Vue 构建页面流程

接下来我们来看一下项目里面的文件,了解页面是怎么构建出来的,我们主要关注 index.html 和 src 文件夹:

  1. 首先是首页入口文件 index.html :

  2. 接着是项目的核心文件 main.js,所有内容都将通过这个文件来引入到项目中:

  3. 在 js 中我们看到了组件,所以接着我们看一下组件 App.vue :

  4. 在 App.vue 中我们看到了 router-view 路由占位符,所以我们可以来到路由文件中,看一下该占位符中会导入什么页面:

  5. 从路由映射表中可知会导入组件 helloworld.vue ,于是我们看一下 helloworld.vue :

  6. 到此,整个页面的流程就结束了,最后实际输出的 index.html 为(大家可以去控制台看一下):


预告
下一篇:Vue系列(3):vue 是什么?
拜拜~

posted @ 2018-10-05 18:02  Chayin  阅读(2889)  评论(0编辑  收藏  举报