从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）

摘要：从零开始搭建一个项目一搭建一个可靠成熟的项目介绍我是去年六月份接触的，当时还是个菜逼，当然现在也是，写了一年，抄代码的时候一直是，在别人的框架基础上开发，然后渐渐发现很多的模板都各有优点，所以慢慢的开始集合到了一起。

vue-cli

我是去年六月份接触的vue1.0，当时还是个菜逼，当然现在也是，写了一年，抄代码的时候一直是copycopy，在别人的框架基础上开发，然后渐渐发现很多vue-start的模板都各有优点，所以慢慢的开始集合到了一起。

使用vue-cli从零开始搭建的话，一些webpack配置也可以让自己明白webpack其实可以做更多的事情。

在使用vue的过程中，转行做了ng4半年左右，对vue也有了更深的理解。

还有一个cooking-cli，配置更简单，假如不想看webpack的复杂配置，可以直接跳到第二篇文章。

node + webapack
webapck需要node提供服务，并且需要npm安装，所以先下载一个node

安装node

node下载

mac推荐下载最新稳定版，windows下载最新版本

下载完成后，打开命令行，输入npm -v 确认安装完成（安利一个命令行工具,同时具备git bash -- ConEmu）

命令行全局安装webpack + vue-cli

npm太慢的话，可以使用cnpm或者yarn（这步可以略过,下面是cnpm的安装，此后npm命令变成cnpm）

    npm install -g cnpm --registry=https://registry.npm.taobao.org    

安装webpack + vue-cli

    npm install -g webpack vue-cli

vue-cli搭建项目

讲解部分webpack配置文件

讲解项目目录

配置路由以及路由文件

构建完成

初始化项目

打开cmd工具 cd /你的项目目录 例:cd f:/plugins

vue init webpack vue-start

这里其实可以一路回车，然后项目就构建好了，稍微讲解一下这些配置吧

? Project name vue-start //你的项目名称
? Project description A Vue.js project // 你的项目描述
? Author 小帅  // 作者的名称
? Vue build standalone // 这个直接选前者，毕竟是推荐
? Install vue-router? Yes // 是否安装vue-router 选是
? Use ESLint to lint your code? No // 是否使用eslint管理代码，个人项目不推荐，不然你还会想办法关掉它
? Setup unit tests with Karma + Mocha? No // 是否使用karma + mocha 否 因人而异吧，我基本不写测试代码
? Setup e2e tests with Nightwatch? No // 是否安装e2e测试 否

然后

cd vue-start // 进入项目目录
npm i //安装项目依赖
npm run dev // 开始！

我们直接来看看项目目录，分析一下，推荐编辑器vscode，这里有一大波vscode的插件！

目录解析

build -- 这个文件夹大部分是webpack的配置文件

config -- 一些配置文件，比如配置监听端口

node_modules -- 你的依赖包都在这里

src -- 主工程文件夹，基本上所有的开发都在这个文件夹进行

static -- 静态文件目录

package.json -- 这个文件是项目的一些配置信息

这篇文章就不做更多的剖析了，直接进入实战吧

npm run dev之后 会自动打开一个浏览器，但是我觉得这个设定我不喜欢，先把这个功能给禁了吧

build/dev-server.js 73行开始

devMiddleware.waitUntilValid(() => {
  console.log("> Listening at " + uri + "
")
  // when env is testing, don"t need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== "testing") {
    opn(uri)
  }
  _resolve()
})

把这行代码直接注释掉
  // if (autoOpenBrowser && process.env.NODE_ENV !== "testing") {
  //   opn(uri)
  // }

现在打开浏览器 localhost:8080 项目已经可以运行了

命令行ctrl + c退出进程 现在来试试打包

先安装一个插件anywhere 这个是提供http服务的 直接npm i -g anywhere

安装完成后直接来测试生产环境，先把生产环境配置好，以后省功夫

cmd输入 npm run build && anywhere

然后浏览器输入 http://localhost:8000/dist/ 然后发现页面并没有预期的效果，审查元素可以看出js的路径都错了，这个时候需要修改一个配置文件

config/index.js

module.exports = {
  build: {
    env: require("./prod.env"),
    index: path.resolve(__dirname, "../dist/index.html"),
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ["js", "css"],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require("./dev.env"),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

把build（生产环境）的assetsPublicPath修改为相对路径 也就是修改为
assetsPublicPath: "./"

然后重新运行一次 npm run build && anywhere

这个时候就可以看到和开发环境一样的效果了，这就是线上的环境

本篇文章就介绍到这里 下一篇文章将会介绍如何配置图片的路径，以及路由配置。

一个团结互助的讨论组，专注前端三十年！