使用 vue 搭建一个 web 项目

在 vue/react/angular 出现之前,前端开发是这样的:

  • 在一个 html 文件里编写网页内容,
  • 在一个 css 文件里编写样式,
  • 在一个 js 文件里编写 js 代码去请求数据、控制页面内容

将 css 、js 引入到 html ,在三者的共同作用之下,我们就得到了想要的网页。

随着项目规模的变大,各个文件之间的关联会变得越来越复杂,我们的项目也会越来越难以维护。

现在,我们可以使用上述前端框架更方便地进行前端开发,我们可以:

  • 对相同(类似)的页面元素进行复用
  • 更容易地对数据的显示进行控制
  • 统一管理各页面用到的所有数据
  • 在大型项目中更好地组织、维护代码

接下来,我们了解一下如何用 Vue.js 快速创建一个 web 项目

1. 安装Node.js

安装 node 会同时为你的电脑安装 node 的包管理器 npm (01 - What is npm? | npm Documentation

2. 全局安装命令行接口工具 vue-cli

1
2
# 安装 vue-cli
$ npm install --global vue-cli

vue-cli 可以帮你快速搭建一个初始的 vue 项目(无需关心搭建细节,专注于自己的业务代码)。

3. 通过 vue-cli 生成项目

1
2
# 使用 "webpack" 模板创建一个新项目
$ vue init webpack my-project

vue-cli 提供了一个终端命令:vue,这使得你可以通过 vue init 去生成一个项目

上面代码里的 webpack 部分是用来指定生成的项目所使用的模版。

  • webpack是 web 前端的一个构建工具,在这里是指包含了这个构建工具的一套项目模版,vue-cli 还提供了其他模版

最后的 my-project 显然就是项目文件夹(项目名称)。

4. 运行项目

1
2
$ cd my-project
$ npm run dev

进入项目根目录下,执行 npm run dev 即可启动项目。这个时候就可以在浏览器里看到一个初始的 vue 项目了。

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2018/06/20/Start-With-Vue/

版权声明: 转载请注明出处

为您推荐

体验小程序「简易记账」

关注公众号「特想学英语」

vue 项目的目录结构