Vue开发环境集成

Vue.js是什么?

　　阿里巴巴的尤雨溪出的框架

　　Vue.js（读音 /vjuː/, 类似于 view）是目前最流行的一个框架，React是最流行的一个框架。

　　Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。 数据驱动 vue.js 数据驱动和组件化开发，轻量级一些，分层渐进式框架；spa React.js 数据驱动和组件化开发，灵活性很高，需要什么都得自己构建逻辑自己写;app Angular.js 数据驱动 1.0 ，加上了组件化开发2.0，重量级框架;大型企业OA办公

　　Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

　　Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

　　Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue环境搭建

　　Vue的环境搭建方法有两大类：

　　　　一、直接把vue.js引入网页

　　　　二、加载转码器后再引入网页中

　　第一类;

　　　　第一种：本地引入

　　　　直接在vue的官网下载想用的js，然后通过script标签进行引用就行了。

<script src="./src/vue2.6.14.js"></script>

　　　　第二种：CDN引入

　　　　在CDN服务器直接引用就好了

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>

　　　　第三种：编辑器生成

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

　　第二类：

　　　　第一种：自己搭建vue的脚手架

//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+="666"

//7.模板html文件中
<body>
	<div id="app"></div>
<body>
    
//然后就可以在命令行输入指令启动:npm run dev

　　　　第二种：使用官方的脚手架搭建

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

　　　　第三种：可视化管理搭建

1.  npm install  @vue/cli -g
2.  vue ui
3. 打开的界面 中
4.创建项目==>填写项目名字,选择项目创建的目录 点击创建
5.等待它下载所有配置文件完毕  
6.任务中serve启动以后想当与启动了热更新服务器:默认localhost:8080(也可以点启动app直接帮我们打开localhost:8080)
7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为:  ./ 然后点保存修改

　　　　第四种：编辑器生成

HbuilderX 创建项目 选择 vue项目 vue-cli默认模板 
然后要命令行输入:npm i
再命令行输入:npm run serve

　　//注意:代码中回车或者空格导致的报错 禁用eslint启用严格模式来加载我们的代码,项目下新建vue.config.js文件输入以下代码:

module.exports = {
    lintOnSave: false
}

　　//注意:npm run build打包后 生成的引入文件的路径不对 解决方案:手动把路径的斜杠删除

posted @ 2022-08-29 22:29  前端小白银  阅读(234)  评论(0)    收藏  举报