Vue新建项目+git托管+初始配置+项目打包优化

已于 2023-04-10 19:49:01 修改
阅读量660 收藏
点赞数
文章标签： git javascript 前端 vue
于 2023-02-21 21:43:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41550143/article/details/129150254
版权

1、已全局安装vue-cli和nodejs（第一次需要）

2、利用Vue-cli创建项目

  • 打开项目所在文件夹
  • vue create ‘项目名’
  • 选择手动配置

babel：js编辑器
typeScript：超集js【需要指定数据类型】
PWA：离线可用
Linter/Formatter：约束代码规范，配合eslint
unit/e2e testing：测试
在这里插入图片描述
在这里插入图片描述

3、git远程仓库初始化（创建并添加公钥，配一次即可）

4、本地项目托管

  • 新建仓库，给仓库命名即可，无任何勾选
  • 第二次新建仓库，不需要再git全局设置
  • 已经创建了项目，进入vscode终端（管理员）（or cmd进入项目路径）
  • git init
  • 执行橙色代码（第一句表示远程仓库地址，第二句表示首次推送主分支到云端仓库，origin为云仓库别名）

在这里插入图片描述

5、项目文件夹

node_modules:放置项目依赖的地方
public:一般放置一些共用的静态资源，包括页签图标、index.html，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面；<%= BASE_URL %>是public所在路径，使用绝对路径

脚手架目录public和assets区别：参考链接
在这里插入图片描述

src：程序员源代码文件夹

  • assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
  • components文件夹:一般放置非路由组件（或者项目共用的组件）
  • App.vue 唯一的根组件
  • main.js 入口文件【程序最先执行的文件】
  • babel.config.js:babel配置文件【翻译官：如ES6翻译成ES5，兼容好】
  • package.json：应用包配置文件；看到项目描述、项目依赖、项目运行指令【项目信息记录：‘项目身份证’】
  • package-lock.json: 包版本控制文件
  • .gitignore: git版本管制忽略的配置
  • README.md:项目说明文件

补充：通过 vue.config.js 可以修改 webpack 的默认配置
在这里插入图片描述

6、初始配置

a. 浏览器自动打开html，vue-cli-service serve --open

在package.json文件中
        "scripts": {
         "serve": "vue-cli-service serve --open",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },

b.关闭eslint校验工具

创建vue.config.js文件：需要对外暴露
module.exports = {
   lintOnSave:false,
}

c. src文件夹的别名的设置 【@表示src文件夹，@在"node_modules","dist"不能用】

创建jsconfig.json文件
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

7、后台项目的环境安装配置；参考黑马项目

  • MySQL数据库；
  • Node.js环境【因为后台接口依赖Node.js】 Nodejs安装及环境配置链接
  • 安装API依赖包；
  • postman测试后台项目接口：【安装与使用见连接】
    https://blog.csdn.net/m0_61843874/article/details/123324727
    https://www.bilibili.com/video/BV1hP4y177gS/?spm_id_from=333.337.search-card.all.click&vd_source=c4d71976fd97f04545873bc4552dfb71
    选择好请求方式；输入URL；body——x-www-form-urlencoded（普通形式输入请求参数）

8、清除初始静态样式，梳理app.vue根组件在这里插入图片描述

9、清除初始路由配置；清除初始的路由组件和非路由组件

新建routes.js放路由规则在这里插入图片描述

10、生成项目报告

npm run build  -- --report

11、项目优化

  1. Vue项目在执行build命令期间中移除所有console.log 链接
  2. 通过 vue.config.js 可以修改 webpack 的默认配置
    在这里插入图片描述
  3. 为开发模式与发布模式指定不同的打包入口
    在这里插入图片描述
    3.1 打包入口的修改，可以通过 configureWebpack和 chainWebpack节点来实现：
    在这里插入图片描述
    3.2 通过 chainWebpack 自定义打包入口
    新建./src/main-prod.js和./src/main-dev.js文件；在vue.config.js进行如下配置
chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
  1. 通过externals 加载外部 CDN 资源，对于externals中的第三方依赖包，在用到依赖包的时候，会找window全局对象上查找并直接使用现成的对象，能够让打包的项目体积更小；只有production模式才有必要配置externals节点

第一步：vue.config.js——>配置externals节点
在这里插入图片描述

//配置后的vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  // 通过 chainWebpack 为开发模式与发布模式指定不同的打包入口
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

       // 通过externals 加载外部 CDN 资源
      config.set('externals',{
        vpe : ' Vue ',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_', 
        echarts: 'echarts',
        nprogress:'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
    })

    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
})

第二步：导入的样式表也会被导入到输出文件中，导致体积大；临时注释掉main.prod.js中的import的VueQuillEditor样式表；进行如下配置；【注意版本号】
在这里插入图片描述
进一步添加js文件的CDN引用：
在这里插入图片描述

<!-- 富文本编辑器样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css"/>

    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/1.3.4/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"></script>
      <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
  1. .通过 CDN 优化 ElementUl 的打包

第一步：在这里插入图片描述

<!-- element-ui的样表文件-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css" />
    <!-- element-ui的 js 又件-->
    <script src="https://cdn.staticfile.org/element-ui/2.15.13/index.js"></script>

第二步：临时注释掉
// 引入自定义插件 （封装element按需引入模块）
// import element from ‘./plugins/element’

  1. 首页内容定制（根据production模式和development模式定制）
    不同的打包环境下，首页内容可能会有所不同，我们可以通过插件的方式进行定制；
    isProd的值为True表示production模式，为FALSE表示development模式；

第一步：对vue.config.js中chainWebpack的属性进行调整：

// 通过 chainWebpack 为开发模式与发布模式指定不同的打包入口
  chainWebpack: config => {
    // 1、发布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

       // 通过externals 加载外部 CDN 资源
      config.set('externals',{
        vue : ' Vue ',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_', 
        echarts: 'echarts',
        'vue-quill-editor': 'VueQuillEditor'
      })

      // 不同的打包环境下，首页内容可能会有所不同
      // 我们可以通过插件的方式进行定制，根据isProd的值，来决定如何染页面结构，发布模式插件配置如下:
      config.plugin('html') .tap(args => {
        args[0].isProd = true
        return args
      })
    })

    // 2、开发模式
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')

      // 不同的打包环境下，首页内容可能会有所不同
      // 我们可以通过插件的方式进行定制，根据isProd的值，来决定如何染页面结构，开发模式插件配置如下:
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }

第二步：在public/index.html首页中，可以根据isProd的值，来决定如何染页面结构

<title><%=htmlWebpackPlugin.options.isProd?'':'dev-' %>电商后台管理系统</title>

<!-- 在production模式下isProd = true，会获取CDN里的依赖资源，development模式下isProd = false，用本地下载的依赖 -->
<% if(htmlWebpackPlugin.options.isProd){ %>
	前面CDN引入的依赖资源（富文本编辑器+elemen-ui）
<% } %>

前面CDN引入的依赖资源（富文本编辑器+elemen-ui），代码如下：
	<!-- 富文本编辑器样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css"/>

    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/1.3.4/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"></script>
      <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script> 

    <!-- element-ui的样表文件-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css" />
    <!-- element-ui的 js 又件-->
    <script src="https://cdn.staticfile.org/element-ui/2.15.13/index.js"></script>

第三步：由于对首页内容根据production模式和development模式进行了定制，需要将前面注释掉的富文本编辑器样式，以及element-ui样式引入取消注释，最终项目会根据不同模式展示首页

7. 路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后**[当路由被访问的时候才加载对应组件**]，这样就会更加高效。

在这里插入图片描述

简化：
不需要在route.js文件 import UserDetails from ‘./views/UserDetails.vue’；直接路由懒加载
{
name:‘search’, //商品搜索
path:‘/search’,
component:()=>import(‘@/pages/Search’), [路由被访问才加载组件]
}
在这里插入图片描述

yuer_41555
关注
Vue学习之项目初始化与码云git提交过程
ShaoDu的博客
03-14 396
1、安装vue所必备的vue-cli        安装vue-cli需要使用npm命令，需要先安装好node.js vue-cli若是按照官网上的安装教程：npm install -g vue-cli，中间由于连接国外网的缘故安装过程会出错，导致安装失败       ...
Vue项目创建及Git、gitee项目关联-(初次创建笔记)
abundoning的博客
03-21 2692
Vue-cli配置，Vue项目创建，Git与gitee关联项目文件
vue项目git
weixin_30819163的博客
07-22 274
https://github.com/renrenio/renren-fast-vue https://github.com/hzlshen/vue-project 转载于:https://www.cnblogs.com/sweeeper/p/11227559.html
vue3 项目中使用git
最新发布
m0_63178019的博客
09-06 591
在vue3-project-git 项目文件夹下 初始化一个新的Git仓库，可以看到初始化成功之后就会出现一个.git文件，该文件包含所有必要的 Git 配置和版本控制信息。返回git bash命令行工具 ，输入ssh-keygen -t rsa生成公钥，用cat ~/.ssh/id_rsa.pub查看公钥。打开远程仓库，打开app.vue文件，可以发现已经发生了改变，推送成功。将ssh公钥选中右键复制，粘贴到gitee生成公钥处，点击确定。修改了app.vue的内容，然后点击分支的“+”暂存。
vue基础——git管理vue项目
weixin_41357609的博客
03-15 276
【代码】vue基础——git管理vue项目。
【git-02】用git管理vue项目
不知道在干嘛每天
12-10 720
将vue项目上传到gitee管理 一、准备工作 首先在gitee上面创建一个新仓库 用REAMD初始化仓库，设置分支可以是master或者master/develop或者其他 获取仓库的ssh访问链接 git@gitee.com:iHunzi/front-end-learning.git 创建一个Vue的项目（vue cli），已有项目忽略。。。 进入项目工程目录 cd xx/xx/xx 二、将本地仓库与gitee的远程仓库关联 在vue项目目录下，将这个目录设置成git本地仓库 git in
【Vue.js + Vuex + TypeScript 实战项目开发与项目优化】
weixin_37883657的博客
03-31 504
创建项目：使用 Vue CLI 创建项目 安装 Vue CLI：npm i -g @vue/cli vue create edu-boss-fed cd edu-boss-fed npm run serve 加入Git版本管理 创建远程仓库 将本地仓库推到线上 如果没有本地仓库： git init# 创建本地仓库 git add .# 将问件添加到暂存区 git commit -m "提交日志" #提交历史记录 git remote add or...
Vue2+Node.js前后端分离项目部署到云服务器
SongD1114的博客
04-15 5697
Vue2+Node.js前后端分离项目部署到云服务器
创建完vue项目自动连接到git
07-27
- *3* [Vue新建项目+git托管+初始配置+项目打包优化](https://blog.csdn.net/qq_41550143/article/details/129150254)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip...
基于vue.js+element-ui组件开发的博客blog详细步骤
perfect_code_hzy的博客
06-17 685
vue学习笔记一、前端项目初始化步骤1、通过vue脚手架创建项目2、配置vue路由3、配置element-ui组件库4、配置axios库二、使用步骤1.引入库2.读入数据总结 一、前端项目初始化步骤 1、通过vue脚手架创建项目 通过vue ui命令进行可视化创建项目 选择创建的路径 -> 自定义配置项目 -> 安装babel/router/使用配置文件 -> 是否使用history模式的router，不选，默认使用hash模式的router Vue路由的hash模式和history
vue项目的创建+git仓库的使用
XUMINGRUNDEJIE的博客
07-02 4508
vue项目的创建+git仓库的使用 安装环境：window10 主要总结一下vue项目的创建以及上传到gitee仓库的过程。 vue项目的创建 首先vue项目是依赖于nodejs环境的 1.检查电脑中是否装有node win + r-------------------->输入cmd----------------------输入node -v 若显示无法识别字样，则未安装。 2.安装nodejs 下载地址：https://nodejs.org/zh-cn/ 一般下载长期支持版 下载完成后，打开文件
vue-cli创建vue.js项目并添加git版本控制
悦度空间
07-20 6567
查看更多资源 第一步：全局安装vue-cli C:\Users\小羊先生>npm install vue-cli --global npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) c:\web\nodejs\node_global...
JavaScript系列--BOM，web移动web开发
2401_84091321的博客
04-03 718
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题。
VUE环境配置步骤及相关Git Bash命令的使用
weixin_33896069的博客
01-18 153
组件式开发中，一定少不了Vue，废话少说，开始进行Vue应用前的关键性配置 备注：（为方便进行配置，提前可以安装Git bash,下载路径——https://git-scm.com/downloads，安装略） 1.新建；新建项目文件夹（或称“目录”），进入新建的项目文件夹，右键选择“git bash here”，弹出命令框； 2.检查；在命令框中输入 node -v检查是否安装有...
Git使用和Vue项目
八月
12-27 1221
1、创建git排除文件，.gitignore 2、READEME.md 和 LICENSE开源协议 git init 创建仓库 ， git status 查看文件状态 红色文件表示未提交。 git add . 把文件提交到暂存区 git commit -m "init my project" 推送到本地git库中 代码提交到码云 ==> 如果本地没有公钥，先打开cmd或git bash ...
vue初始化项目并上传至GitHub
qq_43433815的博客
10-14 915
最少使用命名行实现在本地创建并初始化Vue项目，然后上传到GitHub。
vue环境搭建 git+node+webpack
技术改变生活
09-10 384
1.Git安装 Git是什么： Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。 下载Git For Windows：Git，进入下载页面后，会默认自动下载最新版本的安装程序，如果长时间没反应，点击click here to download manually手动下载Git安装程序，我下载时的版本为Git-2.13.0-64-bit.exe。 ...
创建vue项目并关联到git
liuminwithsmile的博客
12-26 457
将本地代码上传到阿里云
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值