搭建VUE项目

1. 安装并初始化项目

Vue.js提供了一个官方命令行工具,可用于快速搭建大型的应用。

# 全局安装 vue-cli(前提是安装了淘宝的npm镜像,就可以使用cnpm命令了)
cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
...
# Project initialization finished!
# ========================

To get started:

  cd my-project
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

2. 运行并访问项目

# 进入项目
cd my-project
# 安装相关依赖包
cnpm install
# 启动运行
cnpm run dev
# 运行成功之后显示:
 DONE  Compiled successfully in 3323ms                                                                          14:17:24

 I  Your application is running here: http://localhost:8080

项目启动成功,通过浏览器访问http://localhost:8080就可以看到项目的主页了。

3. 项目目录结构

刚初始化完成的项目目录以及作用:

目录/文件

说明

build

项目构建(webpack)相关代码

config

配置目录,包括端口号等。我们初学可以使用默认的。

node_modules

npm 加载的项目依赖模块

src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等。components: 目录里面放了一个组件文件,可以不用。App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。main.js: 项目的核心文件。

static

静态资源目录,如图片、字体等。

test

初始测试目录,可删除

.xxxx文件

这些是一些配置文件,包括语法配置,git配置等。

index.html

首页入口文件,你可以添加一些 meta 信息或统计代码啥的。

package.json

项目配置文件。

README.md

项目的说明文档。

4. 项目构建后打包到服务器

更改config/index.js文件,将两处assetsPublicPath的值从/改为./,然后运行:

cnpm run build

运行成功后目标文件会生成到dist目录,然后放到目标服务器,以tomcat服务器为例,将dist整个目录放到webapps下面,启动tomcat然后访问http://localhost:8080/dist就OK了!

疑问1

按照官方教程可以很简单的搭建运行项目,但是VUE的运行原理是什么呢?资源文件如何加载的,如何编译的,主要加载了哪些文件,这些文件的对应关系又是什么?

作为一个后端小哥,对VUE真的不熟悉,在网上发现一个提问正好解决了我的疑问,https://segmentfault.com/q/1010000010792560,简单的说就是得先学习webpack(打包工具)才能解决这些疑问奥。

webpack简介

看了一些资料,简单介绍一下webpack,webpack是一个js应用程序的静态模块打包器,它实现的就是将程序的多个模块打包成1个或多个bundle。

webpack几个关键的概念如下:

  1. 入口:就是项目的一点,你可以理解为java或C的main函数;

  2. 输出:就是项目打包的路径,以及文件的命名;

  3. loader:loader让webpack处理非js文件,因为webpack只能处理js,所以loader的作用就是将所有类型的文件转换为webpack能够处理的有效模块;

  4. 插件:就是扩展咯,给你无限想象。

详细的可以看看:https://www.webpackjs.com/concepts/

Last updated