一，第一种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创建的打包进项目里面（自定义脚手架）

相关推荐