vue 项目创建

vue 项目的构建：

1、cdn: cdn版本库：unpkg.com/browse/vue@…

1、npm init -y

2、npm add vite -D

3、在src目录下创建main.js文件

4、创建index.html、在该文件 添加标签挂载 <div id="app" ></div >

引入cdn：

vue3:unpkg.com/vue@3.1.2/d…

vue2:unpkg.com/vue@2.5.16/…

添加：<script src="./src/main.js" type="module" charset="utf-8"></script>

6、在package修改执行命名

"scripts": {
    "dev": "vite"
  },

7、在main.js文件下：

const App={
	data(){
		return {
			test:'Hello Vue'
		}
	},
	template:`<h1>{{test}}</h1>`
}
//vue3
const {createApp}=Vue;
createApp(App).mount('#app')
//vue2
new Vue({
	render:h=>h(App)
}).$mount('#app')

webPack搭建vue2项目：

1、npm init -y

2、安装webpack： npm add webpack@4.44.2 webpack-cli@3.3.12 webpack-dev-server@3.11.2 html-webpack-plugin@4.5.0 -D

3、package.json:

"scripts": { "dev": "webpack-dev-server" }

4、安装:npm add vue-loader@15.7.0 vue-template-compiler@2.6.14 -D

5、在src目录下创建main.js文件

6、创建public目录，添加index.html、在该文件

添加标签挂载<div id="app"></div>

引入cdn ：

vue2:unpkg.com/vue@2.5.16/…

添加<script src="./src/main.js" charset="utf-8"></script>

7、在src目录添加App.vue文件：然后添加以下内容：

//vue2
new Vue({
	render:h=>h(App)
}).$mount('#app')

8、创建webpack.config.js配置文件

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const VueLoaderPulgin=require('vue-loader/lib/plugin');
module.exports={
	mode:'development',
	entry:'./src/main.js',
	output:{
		path:resolve(__dirname,'dist'),
		filename:'main.js'
	},
	externals:{
                "build": "webpack",
		'vue':'Vue'
	},
	devtool:'source-map',
	module:{
		rules:[
			{
				test: /\.vue$/,
				loader:'vue-loader'
			}
		]
	},
	plugins:[
		new VueLoaderPulgin(),
		new HtmlWebpackPlugin({
			template:resolve(__dirname,'public/index.html')
		})
	]
}

安装vue-loader可能会有一个版本兼容问题

vue2.0切换3.0 npm add vue-loader@next

在webpack.config配置文件中vue-loader的配置：

const VueLoaderPulgin=require('vue-loader/lib/plugin');

改成： const {VueLoaderPulgin}=require('vue-loader');