单页 web 应用(single page web application,SPA), 就是只有一张 Web 页面的应用, 是加载单个 html 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序
提供一个官方命令行工具, 可用于快速搭建大型单页应用 (SPA) 该工具为现代化的前端开发工作流提供了开箱即用的构建配置只需几分钟即可创建并启动一个带热重载保存时静态检查以及可用于生产环境的构建配置的项目:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖, 走你
$ cd my-project
$ npm install
$ npm run dev
注意: CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解如果你是新手, 我们强烈建议先在不用构建工具的情况下通读指南, 在熟悉 Vue 本身之后再使用 CLI
1.1 环境搭建
1.1.1 安装 node.js
从 node.js 官网下载并安装 node, 安装过程很简单, 一路下一步就可以了安装完成之后, 打开命令行工具(win+r, 然后输入 cmd), 输入 node -v, 如下图, 如果出现相应的版本号, 则说明安装成功
如果安装不成功, 可以直接把安装包修改成压缩包, 解压后配置环境变量也可以, 就成了绿色版
这里需要说明下, 因为在官网下载安装 node.js 后, 就已经自带 npm(包管理工具)了, 另需要注意的是 npm 的版本最好是 3.x.x 以上, 以免对后续产生影响
注意版本不能太低, 如果您已经安装了低版本的 node 可以使用 npm 直接更新
1.1.2 修改 npm 为淘宝镜像
因为 npm 的仓库有许多在国外, 访问的速度较慢, 建议修改成 cnpm, 换成 taobao 的镜像
打开命令行工具, 复制如下配置:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装这里是因为我们用的 npm 的服务器是外国, 有的时候我们安装依赖的时候很很慢很慢超级慢, 所以就用这个 cnpm 来安装我们说需要的依赖安装完成之后输入 cnpm -v, 如下图, 如果出现相应的版本号, 则说明安装成功
版本号:
1.1.3 安装 webpack
安装 webpack, 打开命令行工具输入:
npm install webpack - g
安装完成之后输入
webpack -v
如下图, 如果出现相应的版本号, 则说明安装成功
1.1.4 安装 vue-cli 脚手架构建工具
打开命令行工具输入:
cnpm install vue - cli - g
安装完成之后输入 vue -V(注意这里是大写的 V), 如下图, 如果出现相应的版本号, 则说明安装成功
2.2 构建项目
1)在硬盘上找一个文件夹放工程用的这里有两种方式指定到相关目录:
cd 目录路径
如果以安装 git 的, 在相关目录右键选择 Git Bash Here
2)安装 vue 脚手架输入: vue init webpack projectName, 注意这里的 projectName 是项目的名称可以说是随便的起名, 但是不能用中文
提示选择项:
$ vue init webpack exprice --------------------- 这个是那个安装 vue 脚手架的命令
This will install Vue 2.x version of the template. --------------------- 这里说明将要创建一个 vue 2.x 版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) --------------------- 项目名称
? Project name exprice
? Project description (A vue.js project) --------------------- 项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
- ? Author Datura
- ? Vue build (Use arrow keys)
- ? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装 Vue 路由, 也就是以后是 spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n --------------------- 是否启用 eslint 检测规则, 这里个人建议选 no
- ? Use ESLint to lint your code? No
- ? Setup unit tests with Karma + Mocha? (Y/n)
- ? Setup unit tests with Karma + Mocha? Yes
- ? Setup e2e tests with Nightwatch? (Y/n)
- ? Setup e2e tests with Nightwatch? Yes
- vue-cli . Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
- cd exprice
- npm install
- npm run dev
- View Code
3)cd 命令进入创建的工程目录, 首先 cd projectName;
4)安装项目依赖: npm install, 因为自动构建过程中已存在 package.json 文件, 所以这里直接安装依赖就行不要从国内镜像 cnpm 安装(会导致后面缺了很多依赖库), 但是但是如果真的安装个把小时也没成功那就用: cnpm install 吧
5)安装 vue 路由模块 vue-router 和网络请求模块 vue-resource, 输入: cnpm install vue-router vue-resource --save
目录:
- | --build // 项目构建 (webpack) 相关代码
- | |--build.js // 生产环境构建代码
- | |--check - version.js // 检查 nodenpm 等版本
- | |--dev - client.js // 热重载相关
- | |--dev - server.js // 构建本地服务器
- | |--utils.js // 构建工具相关
- | |--webpack.base.conf.js // webpack 基础配置
- | |--webpack.dev.conf.js // webpack 开发环境配置
- | |--webpack.prod.conf.js // webpack 生产环境配置
- | --config // 项目开发环境配置
- | |--dev.env.js // 开发环境变量
- | |--index.js // 项目一些配置变量
- | |--prod.env.js // 生产环境变量
- | |--test.env.js // 测试环境变量
- | --src // 源码目录
- | |--components // vue 公共组件
- | |--store // vuex 的状态管理
- | |--App.vue // 页面入口文件
- | |--main.js // 程序入口文件, 加载各种公共组件
- | --static // 静态文件, 比如一些图片, json 数据等
- | |--data // 群聊分析得到的数据用于数据可视化
- | --.babelrc // ES6 语法编译配置
- | --.editorconfig // 定义代码格式
- | --.gitignore // git 上传需要忽略的文件格式
- | --README.md // 项目说明
- | --favicon.ico | --index.html // 入口页面
- | --package.json // 项目基本信息
2.3 运行项目
6)启动项目, 输入: npm run dev 服务启动成功后浏览器会默认打开一个欢迎页面, 如下图:
编译成功后可以直接在浏览器中查看项目:
来源: https://www.cnblogs.com/chen-cheng/p/8447106.html