# Vue 安装

node 版本号：6.14.8 npm 版本号：v14.15.1

# 使用 vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。

全局安装 vue-cli。

cnpm install -g @vue/cli-init
cnpm install --global vue-cli

创建基于 webpack 的新项目，执行完命令后会有很多选项，全部回车使用默认选项即可。

vue init webpack cc-ermo-vue2-demo

执行完命令后需要下载默认依赖，需要耐心等待。

项目创建成功的部分输出信息：

Running eslint --fix to comply with chosen preset rules...
# ========================


> cc-ermo-vue2-demo@1.0.0 lint
> eslint --ext .js,.vue src test/unit test/e2e/specs --fix


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

To get started:

  cd cc-ermo-vue2-demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

使用编辑器 VSCode 看到项目的基本目录结构如下。

进入目录，安装并运行项目：

cd cc-ermo-vue2-demo
cnpm install
cnpm run dev

项目构建完输出：

Your application is running here: http://localhost:8080

在浏览器打开：http://localhost:8080，可以看到下面内容。

# 项目打包

执行命令进行项目打包

npm run build

执行完成后会在项目根目录下生成 dist 文件夹。

在 dist 文件夹下有 index.html 文件。

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>cc-ermo-vue2-demo</title>
    <link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>

<body>
    <div id=app></div>
    <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
    <script type=text/javascript src=/static/js/vendor.43019ad10f30041714f6.js></script>
    <script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script>
</body>

</html>

将涉及到的静态文件路径改为相对路径。

<link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.43019ad10f30041714f6.js></script>
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script>

修改为

<link href=static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
<script type=text/javascript src=static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=static/js/vendor.43019ad10f30041714f6.js></script>
<script type=text/javascript src=static/js/app.b22ce679862c47a75225.js></script>

在浏览器中打开 index.html，同样可以看到刚才的启动页面。

# 修改页面内容

修改 src/components/HelloWrold.vue 中的内容。

修改前的内容。

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

修改后的内容。

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App ermo.cc'
    }
  }
}
</script>

在项目启动的状态下（执行了 npm run dev），页面内容会实时更新。

# 项目目录结构

cc-ermo-vue2-demo
├─ .babelrc
├─ .editorconfig
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ .postcssrc.js
├─ README.md
├─ build
│  ├─ build.js
│  ├─ check-versions.js
│  ├─ logo.png
│  ├─ utils.js
│  ├─ vue-loader.conf.js
│  ├─ webpack.base.conf.js
│  ├─ webpack.dev.conf.js
│  └─ webpack.prod.conf.js
├─ config
│  ├─ dev.env.js
│  ├─ index.js
│  ├─ prod.env.js
│  └─ test.env.js
├─ dist
│  ├─ index.html
│  └─ static
│     ├─ css
│     │  ├─ app.30790115300ab27614ce176899523b62.css
│     │  └─ app.30790115300ab27614ce176899523b62.css.map
│     └─ js
│        ├─ app.b22ce679862c47a75225.js
│        ├─ app.b22ce679862c47a75225.js.map
│        ├─ manifest.2ae2e69a05c33dfc65f8.js
│        ├─ manifest.2ae2e69a05c33dfc65f8.js.map
│        ├─ vendor.43019ad10f30041714f6.js
│        └─ vendor.43019ad10f30041714f6.js.map
├─ index.html
├─ package-lock.json
├─ package.json
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ components
│  │  └─ HelloWorld.vue
│  ├─ main.js
│  └─ router
│     └─ index.js
├─ static
│  └─ .gitkeep
└─ test
   ├─ e2e
   │  ├─ custom-assertions
   │  │  └─ elementCount.js
   │  ├─ nightwatch.conf.js
   │  ├─ runner.js
   │  └─ specs
   │     └─ test.js
   └─ unit
      ├─ .eslintrc
      ├─ jest.conf.js
      ├─ setup.js
      └─ specs
         └─ HelloWorld.spec.js

目录/文件	描述
node_modules	用于存放当前项目依赖的包，这个文件夹的内容很杂，一般会在 .gitignore 文件中忽略传输，协作人员可以通过 package.json 文件配置的依赖重新拉取
build	项目构建 webpack 代码
config	包含几个不同环境的配置文件，内容有端口号，域名等
dist	输出目录，使用 `npm run build` 命令生成的静态资源，可直接部署到服务器使用，相比直接编写的 html 文件的优势就是经过压缩和优化
src	开发目录，日常的开发工作都在这里
src/assets	静态资源，比如 logo 图，精灵图等
src/components	存放可复用的组件
src/router	存放路由配置
src/App.vue	项目入口组件
src/main.js	项目入口 js 文件，实例化 Vue，放置常用的常用的样式和组件，存储全局变量
static	静态资源，可以存储图片和字体等
test	初始化测试目录
index.html	项目入口 html 文件，可以配置 meta 元信息和 title 等 header 信息
package.json	项目配置文件，包括项目名、版本、作者、依赖以及常用脚本命令配置
README.md	项目说明文件，相当于一个项目的白皮书

快速开始 →