1
 2
 3
 4
 5
 6
 7
 8
 9
10

npm install -g vue-cli
# 全局安装vue-cli
vue init webpack myproject
# 创建vue项目，执行时，会提示输入项目的相关信息
cd myproject
# 进入项目
npm install
# 安装依赖包，新建node_modules文件夹，依赖包安装在此
npm run dev
# 本地运行，默认在http://localhost:8080，启动服务

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

|--build  //webpack相关代码文件夹
|  |--build.js //生产环境结构代码
|  |--check-version.js //检查node、npm等版本
|  |--dev-client.js  //热加载相关代码
|  |--dev-server.js  //本地服务器
|  |--utils.js  //构建工具
|  |--vue-loader.conf.js  //vue加载器
|  |--webpack.base.conf.js //webpack基本配置
|  |--webpack.dev.conf.js //webpack开发环境配置
|  |--webpack.test.conf.js //webpack测试环境配置
|  |--webpack.prod.conf.js  //webpack生产环境配置
|--config  //项目开发环境配置
|  |--index.js  //项目基本配置
|  |--dev.env.js  //开发环境变量
|  |--test.env.js  //测试环境变量
|  |--prod.env.js  //生产环境变量
|--src  //项目源代码目录
|  |--assets //资源目录
|  |--components  //组件目录
|  |--router //路由目录
|  |--APP.vue  //页面入口文件
|  |--main.js  //程序入口文件，加载各种公共组件
|--static  //静态文件目录，比如：css、图片等静态文件
|--index.html  //入口文件
|--test  //单元测试文件目录
|--package.json  //项目基本信息
|--README.md   //项目说明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<template>
  <div class="home">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: "I am Home Page",
      };
    },
  };
</script>

<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import Home from "@/components/Home";

export default new Router({
  routes: [
    {
      path: "/home",
      name: "home",
      component: Home,
    },
  ],
});

1
2

cd myproject
npm run build

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

dist
|-- index.html
`-- static
    |-- css
    |   |-- app.css # 样式
    |   `-- app.css.map
    `-- js
        |-- app.js # 主要是vue模板编译后的内容
        |-- app.js.map
        |-- manifest.js  #在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容
        |-- manifest.js.map
        |-- vendor.js # 通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分）
        `-- vendor.js.map