Vue环境安装

环境安装

直接引用

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

或者可以下载到本地位置，在手动导入

import Vue from './vue.js'

或是编辑器直接生成cdn的方式

  HbuilderX 创建项目 选择 vue项目普通模式

手动安装配置vue脚手架

把vue的代码环境集成了然后开始在vue的代码环境中写项目,最终才经过webpack打包生成第一类方式


/*
1.新建项目  alipay 
2.初始化配置文件:npm init -y
3.下载依赖:
 npm i webpack@5.74.0 webpack-cli@4.10.0 vue-loader@17.0.0 @vue/compiler-sfc@3.2.37 webpack-dev-server@4.10.0  html-webpack-plugin@5.5.0 -D
npm i vue -S 
4.webpack.config.js配置:
*/
const path = require('path');
const {
	VueLoaderPlugin
} = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	mode: 'production',
	watch: true,
	entry: './src/main.js',
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist'),
	},
	module: {
		rules: [{
			test: /\.vue$/,
			loader: 'vue-loader',
		}, ]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src/index.html'),
			filename: 'index.html'
		}),
		new VueLoaderPlugin(),
	],
	devServer: {
		open: true,
		port: 8080,
		hot: true,
		host: '192.168.2.60',
		compress: true,
	},
}

//5.项目配置文件 pakage.json文件中:
//scripts:{
//"dev": "webpack serve --config webpack.config.js"
//}

//6.main.js文件:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
document.body.innerHTML+="444"

//7.模板html文件中
<body>
	<div id="app"></div>
<body>
    
//然后就可以启动了:npm run dev  但是 但是 但是  修改了之后 会等很久才刷新  因为没有配置优化 所以很卡  官方的脚手架配置的特别好  就反应很快

下载官方提供脚手架

1.  cnpm install  @vue/cli -g //下载官方脚手架
2.  vue create app1  //项目名称
3. 接下来让你选择一些默认要生成的工具,不管直接回车
4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端
5. 启动:
npm run serve  //生成的打包文件在内存中不会写入磁盘用于开发阶段
或者  
npm run build //生成的打包文件在dist中 用于项目上线

或是利用vue提供的可视化管理工具cli:vue ui进入到可视化页面点击按钮创建项目

或是利用编辑器来手动创建项目

创建项目选择 vue项目 vue-cli默认模板
然后要:npm i
cli:npm run serve

posted @ 2022-09-07 18:27 a立方阅读(193) 评论(0) 编辑收藏举报

刷新页面返回顶部

Vue环境安装

环境安装

公告