當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue-cli生成项目时你应当知道的

發(fā)布時間：2023/12/10 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue-cli生成项目时你应当知道的小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、安裝

npm install -g vue-cli

二、創(chuàng)建項目

vue init 模板名項目名 vue init webpack mymall

模板名:

1 . webpack 最常用
2 . webpack-simple // 一個簡單webpack+vue-loader的模板，不包含其他功能。
3 . browserify // 一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
4 . browserify-simple // 一個簡單Browserify+vueify的模板，不包含其他功能。
5 . pwa // 基于webpack模板的vue-cli的PWA模板
6 . simple // 一個最簡單的單頁應(yīng)用模板

執(zhí)行指令后，會讓用戶輸入幾個基本的選項（vue-router在這里就安裝了）

Project name :項目名稱，如果不需要更改直接回車就可以了。注意：這里不能使用大寫。
Project description:項目描述，默認(rèn)為A Vue.js project,直接回車，不用編寫。
Author：作者，如果你有配置git，他會讀取.ssh文件中的user。
Install vue-router? 是否安裝vue的路由插件，Y代表安裝，N無需安裝，下面的命令也是一樣的。
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風(fēng)格
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha。
Setup e2e tests with Nightwatch?是否安裝e2e來進(jìn)行用戶行為模擬測試。
Should we run npm install for you after the project has been created?(recommended)npm

三、build文件夾注意點

3.1 package.json – npm run dev時做了什么？

3.1.1 文件目錄

package.json其中這段代碼：

當(dāng)npm run dev時，執(zhí)行了：

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

這句話的意思是利用 webpack-dev-server 讀取 webpack.dev.conf.js 信息并啟動一個本地服務(wù)器。

3.2 dependencies 與 devDependencies

dependencies 是運行時依賴（生產(chǎn)環(huán)境） npm install --save (package name)
devDependencies 是開發(fā)時的依賴（開發(fā)環(huán)境） npm install –save-dev (package name)

3.3 基礎(chǔ)配置文件 webpack.base.conf.js – 告訴webpack加載后綴為（.js .vue .json）的文件

resolve的extensions告訴wepack要加載后綴為（.js .vue .json）的文件

alias創(chuàng)建別名，將@解析為src

使用不同loader解析（vue/js/圖片/多媒體/字體）
其中：對src和test文件夾下的.js文件使用babel-loader將es6+的代碼轉(zhuǎn)成es5
能夠使用戶在引入模塊時不帶擴展

38 /**39 * 當(dāng)webpack試圖去加載模塊的時候，它默認(rèn)是查找以 .js 結(jié)尾的文件的，40 * 它并不知道 .vue 結(jié)尾的文件是什么，41 * 所以我們要在配置文件中告訴webpack，42 * 遇到 .vue 結(jié)尾的也要去加載，43 * 添加 resolve 配置項，如下：44 */45 resolve: {46 extensions: ['.js', '.vue', '.json'],47 alias: { // 創(chuàng)建別名48 'vue$': 'vue/dist/vue.esm.js',49 '@': resolve('src'), 50 }51 },52 // 不同類型模塊的處理規(guī)則就是用不同的loader處理不同的文件53 module: {54 rules: [55 ...(config.dev.useEslint ? [createLintingRule()] : []),56 {// 對所有.vue文件使用vue-loader進(jìn)行編譯57 test: /\.vue$/,58 loader: 'vue-loader',59 options: vueLoaderConfig60 },61 {// 對src和test文件夾下的.js文件使用babel-loader將es6+的代碼轉(zhuǎn)成es562 test: /\.js$/,63 loader: 'babel-loader',64 include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]65 },66 {// 對圖片資源文件使用url-loader67 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,68 loader: 'url-loader',69 options: {70 // 小于10K的圖片轉(zhuǎn)成base64編碼的dataURL字符串寫到代碼中71 limit: 10000,72 // 其他的圖片轉(zhuǎn)移到靜態(tài)資源文件夾73 name: utils.assetsPath('img/[name].[hash:7].[ext]')74 }75 },76 {// 對多媒體資源文件使用url-loader77 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,78 loader: 'url-loader',79 options: {80 // 小于10K的資源轉(zhuǎn)成base64編碼的dataURL字符串寫到代碼中81 limit: 10000,82 // 其他的資源轉(zhuǎn)移到靜態(tài)資源文件夾83 name: utils.assetsPath('media/[name].[hash:7].[ext]')84 }85 },86 {// 對字體資源文件使用url-loader87 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,88 loader: 'url-loader',89 options: {90 limit: 10000,91 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // hash:7 代表 7 位數(shù)的 hash92 }93 }94 ]95 },

3.4 開發(fā)環(huán)境配置文件 webpack.dev.conf.js

// webpack-dev-server服務(wù)器配置 devServer: { hot: true, // 開啟熱模塊加載} plugins: [new HtmlWebpackPlugin({// 指定編譯后生成的html文件名filename: 'index.html',// 需要處理的模板template: 'index.html',// 打包過程中輸出的js、css的路徑添加到html文件中// css文件插入到head中// js文件插入到body中，可能的選項有 true, 'head', 'body', falseinject: true}),

3.5 生產(chǎn)模式配置文件 webpack.prod.conf.js

打包時做了什么

// copy-webpack-plugin，用于將static中的靜態(tài)文件復(fù)制到文件夾dist const CopyWebpackPlugin = require('copy-webpack-plugin')new HtmlWebpackPlugin({minify: {// 刪除index.html中的注釋removeComments: true,// 刪除index.html中的空格collapseWhitespace: true,// 刪除各種html標(biāo)簽屬性值的雙引號removeAttributeQuotes: true}})

四、 .編碼規(guī)范.editorconfig （自定義）

這也就是eslint在檢查代碼的依據(jù)

1 root = true 2 3 [*] // 對所有文件應(yīng)用下面的規(guī)則 4 charset = utf-8 // 編碼規(guī)則用utf-8 5 indent_style = space // 縮進(jìn)用空格 6 indent_size = 2 // 縮進(jìn)數(shù)量為2個空格 7 end_of_line = lf // 換行符格式 8 insert_final_newline = true // 是否在文件的最后插入一個空行 9 trim_trailing_whitespace = true // 是否刪除行尾的空格

五、組件駝峰命名

5.1組件中（html短橫線，模板字符串駝峰）

js中（模板字符串 {{ }} ）：vue的組件的props屬性支持駝峰命名camelCased ,不支持連接線命名,使用是用連接線進(jìn)行賦值或者數(shù)據(jù)綁定!
html中：HTML 特性是不區(qū)分大小寫的，要使用連接線 kebab-case (短橫線隔開式)

var myname={'first-name':'9','last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']);打印出來是 NaN 9

js中：之所以沒有前面沒有打印出來9,是因為程序走的時候,把英文連接符當(dāng)做減號看待,myname.first和name是undefined,所以會 undefined-undefined=NaN
具體應(yīng)該看vue文檔：Prop-的大小寫-camelCase-vs-kebab-case

5.2 組件名大小寫

組件注冊

定義組件名的方式有兩種：使用 kebab-case （全小寫） Vue.component('my-component-name', { /* ... */ }) 當(dāng)使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>。使用 PascalCase Vue.component('MyComponentName', { /* ... */ }) 當(dāng)使用 PascalCase (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。

再來看看vue官方的風(fēng)格指南：組件名為多個單詞

組件名應(yīng)該始終是多個單詞的，根組件 App 以及、之類的 Vue 內(nèi)置組件除外。
這樣做可以避免跟現(xiàn)有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的。

反例 Vue.component('todo', {// ... }) export default {name: 'Todo',// ... } 好例子 Vue.component('todo-item', {// ... }) export default {name: 'TodoItem',// ... }

wow 風(fēng)格指南應(yīng)當(dāng)好好看看 😃

總結(jié)

以上是生活随笔為你收集整理的vue-cli生成项目时你应当知道的的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java标书_java软件项目投标技术标
下一篇： mysql if 多个_MySQL使用I