目录

    1,初始化项目

    vue-cli 是Vue官方发布的项目脚手架,使用 vue-cli 可以快速创建 Vue + Webpack项目。

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

    2,目录结构说明

    |--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   //项目说明
    
    

    3,新增一个页面

    下面以增加一个页面为例,说明开发流程。

    3.1,增加页面模板

    在src/compoents目录下,新建文件Home.vue作为/home 路由的显示页面。

    Home.Vue

    <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>
    
    

    渲染页面模板,主要分为三个部分:

    • template。HTMLDom结构,页面显示的内容。
    • script。Vue的逻辑代码,前端js。
    • style。样式内容,scoped表示仅在本模板生效。

    3.2,增加页面路由

    在src/router目录下,index.js中新增如下内容。

    index.js新增

    import Home from '@/components/Home'
    
    export default new Router({
      routes: [
        {
          path: '/home',
          name: 'home',
          component: Home
        }
      ]
    })
    

    这样 http://localhost:8080/#/home ,就路由到了Home.vue页面了。需要注意的是,这里的路由是从#后面开始的。

    4,打包编译

    在项目目录下,利用npm,执行build即可完成生产环节的打包编译。

    cd myproject
    npm run build
    

    打包生成的文件输出路径,在config/index.js的assetsRoot、assetsSubDirectory参数中指定

    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
    

    关于map文件:在开启了控制台(F12)的时候,才会加载.map文件。通常生产环境的js和css代码,经过压缩,一个文件可能只有几行代码,但是每行却有几千字符。这样非常不利于代码调试,map文件就是用来调试代码,定位代码行的。