如何创建一个SPA应用

SPA应用 即是单页面应用

主要用于后台管理系统的开发，一般门户网站不会使用spa应用，因为单页面应用不利于搜索引擎（SEO）的优化.

如何创建一个SPA应用

• vue-cli2

• vue-cli3

• vue-cli2步骤

• npm install -g vue-cli # 只需要第一次安装时执行

• vue init webpack my-project # 使用webpack模板创建一个vue项目，下面为安装时候的要求

? Project name vue-demo1     //项目名称
? Project description 例子   //项目描述
? Author dreamFly <liumf@vip.qq.com>    //项目坐着
? Vue build standalone                 //项目构建方式，推荐运行加编译
? Install vue-router? Yes  //是否安装路由
? Use ESLint to lint your code? No // 是否安装ESLint代码检测工具
? Set up unit tests No //是否安装单元测试
? Setup e2e tests with Nightwatch? No //是否安装Nightwatch测试工具
? Should we run `npm install` for you after the project has been created? (recommended) no //是否运行npm install当项目创建完毕

   vue-cli · Generated "vue-demo1".

# Project initialization finished!
# ========================

To get started:

  cd vue-demo1
  npm install (or if using yarn: yarn)
  npm run dev

• cd my-project #进入到项目目录中
• npm install # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）
• npm run dev # 启动项目

vue-cli3步骤

• 程序包名称从更改vue-cli为@vue/cli。如果vue-cli已全局安装了先前的（1.x或2.x）软件包，则需要先使用npm uninstall vue-cli -g或卸载它yarn global remove vue-cli。
• npm install -g @vue/cli
• vue --version可以命令检查您的版本是否正确
• vue create hello-world创建项目命令

? Please pick a preset: Manually select //features系统将提示您选择一个预设。您可以选择Babel + ESLint基本设置随附的默认预设, 我们选择第二个选项手动

? Check the features needed for your project: Babel, Router
? Use history mode for router? (Requires proper server setup for index fallback in production) No  //使用history模式，选择否
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json//选择这些的创建路径
? Save this as a preset for future projects? No//是否创建模版，下次使用

• cd
• npm run serve 运行

## npm 包管理工具
- 类似后台的maven和gradle，但是并不完全一样
- npm 换源，类似maven切换远程仓库地址

// 换源
npm config set registry https://registry.npm.taobao.org
// 查看当前使用的源
npm config list

### package Json文件

- dependencies 打包时候的依赖
- devDependencies 开发时候的依赖