一幻赚、Vue-cli腳手架工具
Vue-cli是Vue的腳手架工具禀忆，是官方命令行工具 (CLI)，腳手架即編寫好基礎(chǔ)的代碼落恼，包括目錄結(jié)構(gòu)箩退、本地調(diào)試、代碼部署佳谦、熱加載戴涝、單元測(cè)試。
- $ npm install -g vue-cli // 安裝操作
- $ vue -V // 查看版本钻蔑，檢查是否安裝成功
- $ vue list // 查看可以使用哪些模版
- $ vue init <template-name> <project-name>
例如 $ vue init webpack my-project // 官方模版啥刻，也可以使用自定義等模版
// 基本項(xiàng)目設(shè)置
$ vue init webpack sell
? Project name sell # => 項(xiàng)目名稱
? Project description 餓了嗎項(xiàng)目 # => 項(xiàng)目描述
? Author EndEvent <xxxx@qq.com> # => 作者
? Vue build standalone # => 是否支持單文件組件
? Install vue-router? No # => 是否安裝路由
? Use ESLint to lint your code? No # => 是否支持ESLint代碼校驗(yàn)
? Pick an ESLint preset Standard # => 校驗(yàn)的標(biāo)準(zhǔn)是什么？
? Setup unit tests with Karma + Mocha? No # => 是否使用單元測(cè)試
? Setup e2e tests with Nightwatch? No # => 是否使用e2e測(cè)試
vue-cli · Generated "sell".
To get started:
cd sell
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
// 之后再按照上面提示執(zhí)行對(duì)應(yīng)命令即可
$ cd sell
$ npm install
$ npm run dev // 開啟服務(wù)器運(yùn)行代碼咪笑，之后提示例如打開http://localhost:8080頁(yè)面郑什，如果可以打開說(shuō)明配置完成
二、項(xiàng)目文件介紹
-
項(xiàng)目總體文件
項(xiàng)目文件介紹 package.json文件
scripts中配置一些腳本蒲肋，例如在上面使用到的npm run dev蘑拯；
dependencies生產(chǎn)環(huán)境的項(xiàng)目依賴钝满；"vue": "^2.3.3"其^表示安裝的最低版本是2.3.3；
devDependencies編譯項(xiàng)目時(shí)需要的一些依賴(項(xiàng)目打包之后是不會(huì)存在的);
運(yùn)行命令
三申窘、webpack打包 【運(yùn)行時(shí)】
webpack是一個(gè)前端資源加載/打包工具弯蚜，只需要相對(duì)簡(jiǎn)單的配置就可以提供前端工程化需要的各種功能。
項(xiàng)目文件開始時(shí)$ npm run dev
瀏覽器可以打開對(duì)應(yīng)頁(yè)面剃法，在networking中碎捺，會(huì)看到請(qǐng)求的文件，其中例如app.js在項(xiàng)目src資源中是不存在的贷洲，它就是通過(guò)webpack打包工具生成的收厨；
-
$ npm run dev執(zhí)行的腳本是package.json中"dev": "node build/dev-server.js"對(duì)應(yīng)的就是dev-server.js -
dev-server.js文件中，var webpackConfig = require('./webpack.dev.conf')導(dǎo)入對(duì)應(yīng)開發(fā)環(huán)境的配置文件webpack.dev.conf.js -
webpack.dev.conf.js文件中优构，var baseWebpackConfig = require('./webpack.base.conf')開發(fā)環(huán)境和生成環(huán)境都是導(dǎo)入基礎(chǔ)模塊诵叁，對(duì)應(yīng)webpack.base.conf.js文件 -
webpack.base.conf.js文件中，entry: { app: './src/main.js'},指定了webpack編譯的入口文件钦椭，output: { filename: '[name].js' }編譯生成的文件名稱拧额，對(duì)應(yīng)組件生成對(duì)應(yīng)js文件 -
webpack.dev.conf.js文件，module.exports = merge(baseWebpackConfig, { plugins: [new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html',inject: true }),] })這也就是生成對(duì)應(yīng)的入口文件index.html
