vue-cli2.x腳手架的使用

參考鏈接：https://github.com/vuejs/vue-cli/tree/v2#vue-cli--

安裝：

npm install -g vue-cli

用法：

$ vue init < template-name > < project-name >

例：

$ vue init webpack my-project

目前可用的模塊包括：

• webpack - 一個功能齊全的Webpack + vue-loader設置，具有熱重載，linting，測試和css提取功能。
• webpack-simple - 一個簡單的Webpack + vue-loader設置，用于快速原型設計。
• browserify -全功能Browserify + vueify設置用熱重裝載，linting＆單元測試。
• browserify -simple - 一個簡單的Browserify + vueify設置，用于快速原型設計。
• pwa - 基于webpack模板的vue-cli的PWA模板
• simple - 單個HTML文件中最簡單的Vue設置

相關文件和文件夾的含義：

build: 里面是對webpack開發和打包的相關配置，包括入口文件、輸出文件和使用的模塊等

config: 主要是指定開發和打包中的靜態資源，要壓縮的文件類型，開發使用的端口號，開發使用的虛擬服務器跨域請求api等

.babelrc：使用babel的配置文件，用來設置轉碼和插件

.editorconfig：代碼的規范文件，規定使用的空格或者tab縮進，縮進的長度以及代碼風格，使用時需要在編輯器中下載插件

.gitignore：使用git的忽略文件，git操作不會對其產生作用

.postcssrc.js：指定使用的css預編譯器

index.html: 首頁文件，項目運行是，會自動將我們src文件夾里生成的組件插入這個文件里

package-lock.json：當node-module或package.json發生變化時自動生成的文件，這個文件主要功能是確定當前安裝的包的依賴，以便后續安裝的時候生成相同的依賴， 而更新項目開發過程中有些依賴已經發生的更新

package.json：指定項目開發和生成環境中需要使用的依賴庫

README.md：備注文件，項目開發過程中的需要注意的地方進行一些說明

vue-cli3x腳手架的使用

vue-cli3x的官方文檔：https://cli.vuejs.org/

Vue-cli3 中vue.config.js文件配置參考文檔：https://cli.vuejs.org/zh/config/#integrity

// vue.config.js 配置說明 //官方vue.config.js 參考文檔 https://cli.vuejs.org/zh/config/#css-loaderoptions // 這里只列一部分，具體配置參考文檔 module.exports = {// 部署生產環境和開發環境下的URL。// 默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上//例如 https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設置 baseUrl 為 /my-app/。baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",// outputDir: 在npm run build 或 yarn build 時 ，生成文件的目錄名稱（要和baseUrl的生產環境路徑一致）outputDir: "dist",//用于放置生成的靜態資源 (js、css、img、fonts) 的；（項目打包之后，靜態資源會放在這個文件夾下）assetsDir: "assets",//指定生成的 index.html 的輸出路徑 (打包之后，改變系統默認的index.html的文件名)// indexPath: "myIndex.html",//默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。你可以通過將這個選項設為 false 來關閉文件名哈希。(false的時候就是讓原來的文件名不改變)filenameHashing: false,// lintOnSave：{ type:Boolean default:true } 問你是否使用eslintlintOnSave: true,//如果你想要在生產構建時禁用 eslint-loader，你可以用如下配置// lintOnSave: process.env.NODE_ENV !== 'production',//是否使用包含運行時編譯器的 Vue 構建版本。設置為 true 后你就可以在 Vue 組件中使用 template 選項了，但是這會讓你的應用額外增加 10kb 左右。(默認false)// runtimeCompiler: false,/*** 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。* 打包之后發現map文件過大，項目文件體積很大，設置為false就可以不輸出map文件* map文件的作用在于：項目打包后，代碼都是經過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法準確得知是哪里的代碼報錯。* 有了map就可以像未加密的代碼一樣，準確的輸出是哪一行哪一列有錯。* */productionSourceMap: false,// 它支持webPack-dev-server的所有選項devServer: {host: "localhost",port: 1111, // 端口號https: false, // https:{type:Boolean}open: true, //配置自動啟動瀏覽器// proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理// 配置多個代理proxy: {"/api": {target: "<url>",ws: true,changeOrigin: true},"/foo": {target: "<other_url>"}}} };

總結

以上是生活随笔為你收集整理的vue从入门到精通之进阶篇（五）脚手架vue-cli的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。