vue项目创建以及运行

一、创建一个vue项目

1. 创建项目

    # 全局安装 vue-cli
    npm install --global vue-cli
    
    #创建一个基于webpack模板的新项目
    vue-init webpack projectname

2. 安装项目依赖

    cd projectname
    npm install

二、webpack打包Vuejs项目

  在前端工程目录下，输入npm run build，所有的组件、css、图片等都被webpack自动打包到dist目录下,建完成会生成一个 文件夹名字叫dist，里面有一个 index.html 和一个 文件夹static ，

    dist
    ├── index.html
    └── static
        ├── css
        │   ├── app.42b821a6fd065652cb86e2af5bf3b5d2.css
        │   └── app.42b821a6fd065652cb86e2af5bf3b5d2.css.map
        ├── fonts
        │   ├── element-icons.a61be9c.eot
        │   └── element-icons.b02bdc1.ttf
        ├── img
        │   └── element-icons.09162bc.svg
        └── js
            ├── 0.8750b01fa7ffd70f7ba6.js
            ├── vendor.804853a3a7c622c4cb5b.js
            └── vendor.804853a3a7c622c4cb5b.js.map

三、常用命令

(1)运行以及构建

    npm run dev
    npm run start   #前面两者等效
    npm run build

    "scripts": 
    {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js"
    },

运行”npm run build”的时候执行的是build/build.js文件。

（2）build/build.js  build.js主要完成下面几件事：

• loading动画
• 删除创建目标文件夹
• webpack编译
• 输出信息