手动搭建简单的vue项目

1. 创建项目根目录
2. 切换到根目录下 , 并执行 npm init , 所有选项都默认即可.
3. 安装 webpack webpack-cli vue vue-loader
4. 添加项目结构

        

5. 添加webpack配置文件

                 

6. 添加构建脚本 "build":"webpack —config ./xxx/webpack.xxx.config.js"
7. 安装各种需要使用的包

            

            

            

 

        其中 postcss 需要配置文件 postcss.config.js

            

 

        以及修改后的 webpack 配置文件

            

 

8. 添加babel-loader

            

    

        配置 .bablerc 文件

            

 

        修改webpack配置文件

            

 

 

9. 添加 html-webpack-plugin 自动生成index.html内容

            

 

        修改webpack 配置文件

            

 

 

        修改index.html , 将 引用 bundle.js 的 <script> 去掉.

10. 添加 clean-webpack-plugin 插件
11. 添加 webpack-dev-server 

        在添加 webpack-dev-server 之前 , 可以使用静态资源服务器来启动项目 . 比如 http-server , static-server 等.

        

使用 cross-env 是因为 不同平台写scripts的方式不一样.

修改package.json文件

        

12. 配置生产环境 css 单独分离打包 , 方便浏览器缓存

        

 

13. 单独打包类库文件
14. 图片压缩 等操作 …