2020-12-07 Vue 三種基本的使用的辦法

阿新 • • 發佈：2020-12-15

技術標籤：筆記 vue

一，第一種cdn的引入的方式

1.直接引入cdn

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.書寫你的內容

<body>
    <div id="mas">{{ma}}</div>//花括號來取值

    <script>
          new Vue({
              el:"#mas",//需要聯絡的元素
              data: 
{
                  ma:"hellow"   //資料是什麼
              }
          })
    </script>
</body>

3.效果圖
在這裡插入圖片描述

二，官方腳手架的使用

cnpm install @vue/cli -g
vue create app1 //專案名稱
接下來讓你選擇一些預設要生成的工具,不管直接回車
進入專案資料夾: cd app1 //進入專案資料夾,也可以直接在專案資料夾中開啟終端
啟動:
npm run serve //生成的打包檔案在記憶體中不會寫入磁碟用於開發階段
或者
npm run build //生成的打包檔案在dist中用於專案上線

三，將Vue建立的打包進專案裡面（自定義腳手架）

注意：自己構建的腳手架是利用了webpack的便利將vue打包進了專案的裡面但是需要新的載入器

執行命令之前需要有的步驟
1.配置webpack.josn.js 的內容（資料夾需要根據這個配置來新建不然會找不到入口和其他的檔案）

// npm i clean-webpack-plugin  html-webpack-plugin style-loader css-loader file-loader
const {
	CleanWebpackPlugin
} = require('clean-webpack-plugin')
const 
 HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const webpack= require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	entry: "./src/index.js",
	output: {
		filename: "index.js",
		path: __dirname + "/dist"
	},
	module: {
		rules: [
			// {
			// 		test: /\.css/,
			// 		use: ["style-loader", "css-loader"]
            // 	},
            
			{
				test: /\.css$/,
				use: [MiniCssExtractPlugin.loader, 'css-loader']
			},
			{
				test: /\.(png|jpg|ico)$/,
				use: ["file-loader"]
			}
        ],
        rules: [{test: /\.vue$/,loader: 'vue-loader'}]
	},
	plugins: [
        new VueLoaderPlugin(),
		new MiniCssExtractPlugin({
			filename: '[hash:6].css'
		}),
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin({
			hash: true, //為所有包含的指令碼和CSS檔案附加唯一的編譯雜湊，這對快取清除很有用
			filename: 'index.html', //打包後生成的檔名  放在output.path裡面
			template: './src/index.html', //來自哪裡 模板檔案
			inject: 'body', //引入js的位置:引入js的位置:  'head'-頭部引入 'body'/true--</body>之前引入 false不引入
			minify: { //壓縮項配置
				removeComments: false, //是否清除HTML註釋  
				collapseWhitespace: false, //是否壓縮HTML  
				removeScriptTypeAttributes: false, //是否刪除< script>的type="text/javascript"  
				removeStyleLinkTypeAttributes: false, //是否刪除< style>和< link>的type="text/css"  
				minifyJS: false, //是否壓縮頁內JS  
				minifyCSS: false //是否壓縮頁內CSS  
			}
		})

	],


	devServer: {
		contentBase: './dist',
		host: 'localhost',
		compress: true,
		// inline: true,
		port: 7001,
		open: true,
		hot: true//熱更新
	},



}

2.在上面的配置檔案中很多是需要下載的模組所以要下載下面的所有的模組

{
  "name": "04-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open  --inline --progress --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "clean-webpack-plugin": "3.0.0",
    "css-loader": "4.2.2",
    "file-loader": "6.1.0",
    "html-webpack-plugin": "4.4.1",
    "mini-css-extract-plugin": "0.11.0",
    "style-loader": "^1.2.1",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.12",
    "webpack": "4.44.1",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

注意：下載的有些模組之間會有一些相容的問題所以下載要注意按照上面的配置來下載就可以避免一些問題（主要是webpack 和 html-webpack-plugin間的問題）

3.資料夾的關係
在這裡插入圖片描述

執行命令之後進行了寫什麼東西
1.npm run dev
2.找到檔案中 webpack.josn 執行一哈 “webpack-dev-server --open --inline --progress --config webpack.config.js”
3.執行命令之後就會跑到webpack.config.js 裡面去跑程式碼
4.將入口檔案找到跑程式碼能讀懂的就讀讀不懂的就會看配置裡面有沒有解析的配置（例如載入器）有就繼續解析沒有就報錯
5.都沒有錯檔案就會被解析完成熱更新伺服器就將頁面開啟將效果呈現出來（執行的命令可以是兩套一套要打包程式碼一套直接是除錯時候的）

2020-12-07 Vue 三種基本的使用的辦法

一，第一種cdn的引入的方式

二，官方腳手架的使用

三，將Vue建立的打包進專案裡面（自定義腳手架）

2020-12-07 Vue 三種基本的使用的辦法

2020-12-07 JavaScript知識點總結1：基本資料型別與引用資料型別,陣列方法,字串方法,陣列去重,獲取元素的6種方式,JSON 轉換,定時器,判斷資料型別,操作元素屬性,清除浮動

vue路由傳參的三種基本方式

復現一個典型的線上Spring Bean物件的執行緒安全問題（附三種解決辦法）

詳解Python 實現 ZeroMQ 的三種基本工作模式

zabbix中文字元亂碼問題，三種解決辦法總結。總有一種方法適合你

iOS逆向：記錄（2020.12.07更）

2020-12-07

Range的用法三種基本用法

學習記錄 - ES6（2020-12-07）

431、Java框架85 -【SSH - 整合 - 註解方式】 2020.12.07

[2020.12.07週一]賽氪A題

2020.12.07 DataView物件的用法

安卓第五天2020-12-07

2020-12-07-DVWA之XSS

Java基礎三種基本結構

三種基本選擇器

動態規劃三種基本揹包問題模板

vue路由傳參的基本實現方式小結【三種方式】

2020.7.13：Vue全域性元件的三種建立方式、Vue私有元件

2020-12-07 Vue 三種基本的使用的辦法

一，第一種cdn的引入的方式

二，官方腳手架的使用

三，將Vue建立的打包進專案裡面（自定義腳手架）

相關推薦