Vue 01：初始化项目

前端
javascript, vue

最近开始学习Vue框架，使用基于Vue开发的iView组件库，开发单页面应用。iView组件库设计的较为全面，特别欣赏它的复杂表格组件和项目构建工具。IDE使用Webstorm，前段工具为Webpack。

新建工程

  • 进入 iView Cli下载页面 下载构建工具，全平台支持，安装完成后打开。
  • 新建工程，配置如下：
    • CSS预处理：less
    • Ajax：勾选
    • 状态管理：vuex
    • 图表：echarts
    • cookie（js-cookie）：勾选
    • 复制（clipboard）：勾选
    • HTML转图片（html2canvas）：勾选
    • 显示更多配置：填写项目名称
  • 创建工程
  • 用Webstorm打开刚才创建的工程
  • 打开Terminal，进入工程目录（或者用WebStorm内的Terminal），安装依赖包，可能需要等待较长时间，安装完成后，工程目录中出现node_modules目录
1
$ npm install    // 如果未翻墙，使用 cnpm install
1
$ npm run dev
  • 编译打包，
1
$ npm run build
  • Webpack将所有资源文件编译到dist目录下，根目录下有index.html和index_prod.html，前者用于开发环境，后者用于生产环境。

项目结构

  • 主要文件结构和说明如下，有些文件夹需要手工创建
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|— dist                     生产环境资源

|— node_modules         	依赖包

|— src                      源码

    |— components           自定义组件文件夹

    |— config               配置文件夹

    |— libs                 工具库文件夹

    |— styles               自定义样式文件夹

    |— template             模板文件夹

        |— index.ejs        编译index.html的模板

    |— views                视图文件夹

        |— index.vue        app.vue内的内容组件

    |— app.vue              项目根组件，根路由入口

    |— main.js              项目入口js

    |— route.js             VueRouter配置文件

    |— vendors.js           项目入口js

|— index.html               首页（开发环境）

|— index_prod.html          首页（生产环境）

|— package.json             Webpack配置文件

|— webpack.base.config.js   Webpack配置文件

|— webpack.dev.config.js    Webpack配置文件

|— webpack.prod.config.js   Webpack配置文件
分享到