Single page application（单页面应用）

介绍：
Spa： Single page appliaction，只有一个 html 页面，对项目更好的分模块。

 

vue-cli2

npm install -g vue-cli # 只需要第一次安装时执行
vue init webpack my-project # 使用webpack模板创建一个vue项目
cd my-project #进入到项目目录中
npm install # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）
npm run dev # 启动项目

执行 npm install 命令时，默认使用的是国外的下载源 ，可以通过如下代码配置为使用淘宝的镜像：

npm config set registry https://registry.npm.taobao.org

 
此处是在创建项目的时候问项目名字是否为 vue02 ，如果不是可以直接修改，是的话按回车键


创建成功后文件目录：

 

文件目录	作用
packeage.json 文件	定义了项目所需要的的依赖，依赖分为两种：dependencies 和 devDependencies 前者是当项目打包后会跟着项目一起发布，后者则是开发环境项目打包的时候则不会有
node_modules 目录	执行完 npm install 之后，会将所有的依赖下载到这个文件夹中
build 目录	定义了一些，项目打包时候的脚本
config 目录	会配置一些和 node.js 相关的东西
static 目录	放置 静态资源
index.html 文件	唯一的 html 文件，项目运行的就是这个 html 文件，开发的过程中基本不会碰这个文件

src 目录 ：

1. main.js 程序的入口，相当于 java 中的 main 函数
template 代替 div 的元素

components：定义组件，通过 .vue 文件定义

 
web storm 也是支持直接创建 vue 项目，不推荐，如果使用 vue 命令也创建不了的话，则使用 web storm 也创建不了，实际上也是使用命令行创建的。

router：路由，会制定一个路由表，在 router/index.js 文件下。

首先我们进入应用的 index.html 页面中的 <div id="app"></div> 被 main.js 中的 template: '<App/> 替换掉了’

 
 
项目运行方式一：

项目运行方式二：


 
 

vue-cli3

注意：如果安装了 vue-cli2 要卸载在安装 vue-cli3 ，卸载命令如上图！

vue-cli3 卸载的命令：

npm uninstall -g @vue/cli #vue-cli3 卸载的命令

项目创建：

vue create vuehr

创建好的目录：

相比之前的（vue-cli2 创建的） 文件目录更少了，并且直接npm insatll 了，直接将 node_modules 目录下载好了，运行提示。


 
 

文件目录	功能
node_modules 目录	下载依赖的库
public 目录	index.html 文件，和之前的文件作用基本相同，多了一个 noscript 标签，表示如果浏览器不支持 script 则展示里边内容的脚本。
src/components 目录	放置组件
src/views 目录	放置完整的页面
router 目录	放置路由