从0到1,一步步构建Vue单页面应用

Abbot(t)Gloria 发布于1年前

重新开始,独立完成 Vue 项目

准备工作

Node.js、Vue官方文档、ES6

项目构建

直接使用 Vue 官方提供的脚手架(Vue-cli),所以第一步首先是安装脚手架。在命令行或者 Webstorm 的 Terminal 窗口中输入以下命令即可自动安装:

npm i -g vue-cli(全局安装之后,下次可以直接使用,不需要再次安装)

安装完成之后,初始化应用的目录

vue init webpack app(app为项目的根目录)

回车之后会有几个初始化的选项需要你选择:

  1. 项目名、描述、作者,直接回车即可
  2. vue build 选项,与配置相关的,直接回车即可
  3. 是否安装vue-router,后面一般都会用到,所以推荐输入y
  4. 语法检查、单元测试、项目测试,直接输n即可
  5. 项目创建之后是否 npm install ,选择Yes

clipboard.png

回车之后,会自动生成项目结构和安装各种依赖文件。
下载之后输入 npm init -y 初始化项目
之后,输入 npm run dev 运行项目,稍等下完成后就能拿到URL地址,你可以在浏览器打开初始页面。

clipboard.png

到这里,一个基础的单页应用就算是创建完成了。

查看原文: 从0到1,一步步构建Vue单页面应用

  • yellowtiger
  • bluemeercat
  • greenswan
  • bigpanda
  • bigostrich
  • heavymeercat
  • orangegoose
  • smallmouse