本文共 3101 字，大约阅读时间需要 10 分钟。

Vue Cli 介紹

Vue Cli 環境需求

• node.js:
• npm
• webpack ()
• vuecli:

這次課程會使用比較特別的技術

Webpack 和 Gulp 有很大的不同

但會建議先對 Gulp 有一些基本的了解

再來試試看 Webpack 會更好懂

延伸閱讀 gulp 與 Webpack 差異：

沒有接觸過的也沒關係

建議來參考看看本篇介紹了什麼樣的技術

讓在未來工作的時候再次遇到可以不必慌忙

能夠快速的進入狀況

vue list

列出可使用的 Template

可能會出現以下，也就包含了以下的簡單範例

Available official templates:  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.  ★  pwa - PWA template for vue-cli based on the webpack template  ★  simple - The simplest possible Vue setup in a single HTML file  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

开车了

npm install -g vue-clivue init webpack my-projectcd my-projectnpm installnpm run dev

第一步完成以后会出现一些提示

? Generate project in current directory? Yes? Project name hexschool_vuecli (預設)? Project description A Vue.js project (預設)? Author (預設)? Vue build standalone (預設)? Install vue-router? Yes? Use ESLint to lint your code? No? Setup unit tests with Karma + Mocha? No? Setup e2e tests with Nightwatch? No

第一次时间比较长

資料夾結構

|- build|- config|- dist|- node_modules|- static (其他靜態檔案)|- src  |- assets (其他 css, js, images)  |- components (主要 vue 元件)  |- router (vue 的路由器)  |- App.vue (主要樣版檔案，包含一個範例)  |- main.js (vue js 主檔案)|- index.js 靜態檔案

他的打包命令和运行命令都可以在

package.json 中看到

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

start 里面也就是npm run dev可以运行项目

运行后  cmd 命令中会出现项目地址 访问地址就可以调试了

Your application is running here: http://localhost:8080

ctrl+c终止运行

build命令就是打包命令 node build/build.js

就可以打包到dist 目录

Hash: 3a56db4ed6bf6093e3e7Version: webpack 3.12.0Time: 3976ms                                                  Asset       Size  Chunks             Chunk Names               static/js/vendor.4e6936140256982905ea.js     119 kB       0  [emitted]  vendor                  static/js/app.b22ce679862c47a75225.js    11.6 kB       1  [emitted]  app             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest    static/css/app.30790115300ab27614ce176899523b62.css  432 bytes       1  [emitted]  appstatic/css/app.30790115300ab27614ce176899523b62.css.map  828 bytes          [emitted]             static/js/vendor.4e6936140256982905ea.js.map     598 kB       0  [emitted]  vendor              static/js/app.b22ce679862c47a75225.js.map    22.2 kB       1  [emitted]  app         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest                                             index.html  513 bytes          [emitted]    Build complete.  Tip: built files are meant to be served over an HTTP server.  Opening index.html over file:// won't work.

这是我们交付的文件可以暂时不去管他 

整个vue 和angular 结构和命令和文件目录格式都惊人的相似。。可能有同样的规范吧