xunyhu / vue Goto Github PK

用vue-cli快速搭建一个vue+webpack项目
1，首先全局安装一次手脚架 npm install -g vue-cli
2，初始化项目结构 vue init webpack (项目文件名)
执行完初始化后项目里生成的文件如图

上图目录说明

3， 进入到项目目录执行命令 npm install
4， 运行项目 npm run dev
完成上一步之后浏览器会自动打开localhost:8080端口，显示如图

开始项目

• src下新建一个文件夹存放各组件
• 配置src下的main.js文件
• 配置src下的入口文件App.vue
• 配置路由router.js
• npm run dev查看初步效果

5，开发完成后 npm run build 会将最终文件输出到一个dist的文件夹里

区分生产环境和开发环境

在开发环境时因为需要调试代码所以开了sourcemap。
在生产环境中设置devtool: false。

提取第三方库

Webpack DLL

webapck自带的代码压缩插件

{
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

官网教程

vue+vue-router+webpack
1，mian.js 引入vue 和vue-router并配置路由
2，webpack.config.js要安装好所需要的加载器，开发依赖保存在package.json里

遇到的一些问题
1，热加载使用失败
2，没有用到组件间通信
3，require('./images/xx')时没加相对路径'./',报错找了很久
4，git提交时误传了node_modules,解决办法暂停提交然后删除.git文件夹中的index.lock文件，忽略文件夹重新提交