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标签进行引用就行了。

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

　　　　第二种：CDN引入

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

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

　　　　第三种：编辑器生成

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

　　第二类：

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//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
2
3
4
5
6
7
8
1.  npm install  @vue/cli -g //下载官方脚手架
2.  vue create app1  //项目名称
3. 接下来让你选择一些默认要生成的工具,不管直接回车
4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端
5. 启动:
npm run serve  //生成的打包文件在内存中不会写入磁盘用于开发阶段
或者 
npm run build //生成的打包文件在dist中 用于项目上线

　　　　第三种：可视化管理搭建

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

　　　　第四种：编辑器生成

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

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

?
1
2
3
module.exports = {
    lintOnSave: false
}

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

posted @   前端小白银  阅读(208)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue-路由插件集成和配置
·  Vue-组件
·  Vue（一）——Vue简介及环境搭建
·  Vue框架简介和环境搭建
·  第一篇 vue - 基础 - vue 项目的构建方式
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示
SQL AI 助手