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

47次阅读

共计 452 个字符,预计需要花费 2 分钟才能阅读完成。

重新开始,独立完成 Vue 项目
准备工作
Node.js、Vue 官方文档、ES6
项目构建
直接使用 Vue 官方提供的脚手架(Vue-cli),所以第一步首先是安装脚手架。在命令行或者 Webstorm 的 Terminal 窗口中输入以下命令即可自动安装:
npm i -g vue-cli(全局安装之后,下次可以直接使用,不需要再次安装)
安装完成之后,初始化应用的目录
vue init webpack app(app 为项目的根目录)
回车之后会有几个初始化的选项需要你选择:

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

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

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

正文完
 0