從零開始搭建一個vue項目 -- vue-cli/cooking-cli(一)

從零開始搭建一個vue項目 -- vue-cli/cooking-cli(一)

1.vue-cli搭建一個可靠成熟的項目

1.介紹

vue-clicss

  • 我是去年六月份接觸的vue1.0,當時仍是個菜逼,固然如今也是,寫了一年,抄代碼的時候一直是copycopy,在別人的框架基礎上開發,而後漸漸發現不少vue-start的模板都各有優勢,因此慢慢的開始集合到了一塊兒。html

  • 使用vue-cli從零開始搭建的話,一些webpack配置也可讓本身明白webpack其實能夠作更多的事情。前端

  • 在使用vue的過程當中,轉行作了ng4半年左右,對vue也有了更深的理解。vue

  • 還有一個cooking-cli,配置更簡單,假如不想看webpack的複雜配置,能夠直接跳到第二篇文章。node

2.配置node、webpack

node + webapackwebpack

  • webapck須要node提供服務,而且須要npm安裝,因此先下載一個nodegit

  • 安裝nodegithub

node下載web

mac推薦下載最新穩定版,windows下載最新版本vue-router

下載完成後,打開命令行,輸入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

3.開始構建項目

vue-cli搭建項目

  • 講解部分webpack配置文件

  • 講解項目目錄

  • 配置路由以及路由文件

  • 構建完成

  • 初始化項目

打開cmd工具 cd /你的項目目錄 例:cd f:/plugins

vue init webpack vue-start

mark

這裏其實能夠一路回車,而後項目就構建好了,稍微講解一下這些配置吧

? 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的插件

mark

目錄解析

  • build -- 這個文件夾大部分是webpack的配置文件

  • config -- 一些配置文件,好比配置監聽端口

  • node_modules -- 你的依賴包都在這裏

  • src -- 主工程文件夾,基本上全部的開發都在這個文件夾進行

  • static -- 靜態文件目錄

  • package.json -- 這個文件是項目的一些配置信息

這篇文章就不作更多的剖析了,直接進入實戰吧

npm run dev以後 會自動打開一個瀏覽器,可是我以爲這個設定我不喜歡,先把這個功能給禁了吧

build/dev-server.js 73行開始

devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // 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

這個時候就能夠看到和開發環境同樣的效果了,這就是線上的環境

本篇文章就介紹到這裏 下一篇文章將會介紹如何配置圖片的路徑,以及路由配置。

一個團結互助的討論組,專一前端三十年!


mark

相關文章
相關標籤/搜索