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

已于 2023-04-10 19:49:01 修改
阅读量563 收藏
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE配置外部请求接口，不用再每次打包部署
z_jing0927的博客
12-26 1486
vue 打包生成配置文件，方便外部修改公共路径，不用每次都进行打包部署
Vue（五）&&git
ZiminLi的博客
08-01 1071
将仓库内容传送到远程仓库，第一次传输需要输入用户名密码，输入正确后win10以上电脑会自动保存，输错也会自动保存，并且传输时会验证失败，需要修改凭证。当别人先上传到远程仓库后，自己为更新仓库，此时修改代码上传会报错，需要pull到本地进行合并，新的替换老的。克隆之后直接添加会失败，需要进入存在git仓库的文件夹下进行操作，并且可以查看到以往他人的操作。修改代码后再次查看提交状态，发现提示上传本地仓库的已修改，需要重新添加更新，使用。后克隆别人仓库里的项目到自己的本地仓库（私有状态下需要仓库拥有者分配权限）
Vue项目环境搭建及git仓库新建
最新发布
【2023年电力EI会议】
04-20 771
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
Vue（六）添加版本管理工具git以及github和gitee的使用
u014752033的博客
08-13 625
1、下载安装git，具体百度 2、下载安装完毕后，右键点击你的vue项目文件夹，点击 git bash here 进入MINGW64 3、浏览器进入github.com登录并新建仓库 4、在MINGW64中输入：git init 5、git add . 这里是添加所有的文件 6、git commit -m "V1.0" (-m后面的引号内容可以自己任意取) 这里可能会报错，那是因为你上传至远程仓库时使用用户登录，在项目文件夹内的.git文件夹下的config文件，打开并添加user： 就是上图中打马赛克
对封装好的Vue组件库进行打包，并发布到npm上
墨苒孤的博客
05-22 5222
vue-cli给开发者提供了很多构建目标的命令，我们可以将我们的vue项目构建成应用、库或者Web Components组件。第三步、 使用git commit -m ‘上传组件’ 命令填写 上传描述。上没有的包，否则不能上传，同时我们可以指定入口文件。打包成功后，得到如下文件，其中有不同规范下的js文件。第四步、使用 关联远程仓库并上传代码到远程仓库中。第二步、使用git add命令提交路径下文件。的路径、文件进行忽略，我们在上传到。路径下的打包文件，不需要上传源码。文件 就需要在项目根目录下创建。
由于浏览器有缓存机制，vue前端打包部署到服务器后，必须手动刷新浏览器才能加载新的修改。如何配置前端自动加载最新的修改
weixin_45930427的博客
05-10 2388
在打包生成后跳转连接的时候判断 version 版本,从而看是否刷新整个页面,源码如下。可以创建一个静态文件 version.json。在生成的时候重新生成 version.json。
vue+element+admin后台管理项目模板
03-14
添加了动态路由 安装依赖 npm install 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=...启动服务 npm run dev
解决vue-cli + webpack 新建项目出错的问题
08-27
解决vue-cli + webpack 新建项目出错的问题 知识点一：Vue CLI 和 Webpack 的基本概念 在解决问题之前，需要了解 Vue CLI 和 Webpack 的基本概念。Vue CLI 是一个基于 Vue.js 的脚手架工具，用于快速构建和管理 ...
基于vue+node.js+mysql的网站商城
06-01
所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
django项目django+vue项目.zip
11-21
django项目django项目django+vue项目.zipdjango项目django+vue项目.zipdjango项目django+vue项目.zipdjango项目django+vue项目.zipdjango项目django+vue项目.zipdjango项目django+vue项目.zipdjango项目django+vue...
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
05-23
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
Vue - 最新 H5 自定义配置文件不参与打包，让外部有个配置文件能修改并且直接生效的办法（已经打包完毕的项目改配置文件后直接生效，解决每次修改配置都需要重新打包的问题）超级详细的解决示例代码
王佳斌
03-20 4112
vue.js网站项目打包H5后 希望可以修改固定的配置，vue.js h5 PC网页项目打包后修改不方便有没有一个配置文件能不被打包，vue.js网站每次打包后都会把配置文件给弄消失怎么办，vue.js H5配置打包文件抽离出config.js进行线上可修改接口，vue.js 每次改点东西都需要重新打包，怎么让 vue.js 的h5项目打包后仍可修改配置文件呢，vue.js - 最新 H5 自定义配置文件不参与打包，让外部有个配置文件能修改并且直接生效的办法（已经打包完毕的项目改配置文件后直接生效，解决每次
vue基础——git管理vue项目
weixin_41357609的博客
03-15 245
【代码】vue基础——git管理vue项目。
vue初始化项目并上传至GitHub
qq_43433815的博客
10-14 808
最少使用命名行实现在本地创建并初始化Vue项目，然后上传到GitHub。
Github的使用——项目托管（vue项目初始化、github仓库建立、提交项目）
weixin_45664402的博客
12-11 306
Github项目托管 例：现在想要讲一个vue的项目托管到自己的git上。 一、项目初始化及github仓库创建 ①创建vue.js项目 vue create 项目名称 ②在github上创建一个仓库 ③仓库配置 注：若想别人使用时，必须声明版权，则把license中选择Apache License2.0 ④之后create repository ⑤创建成功 二、接下来进行项目的上传 ①复制git仓库地址 ②进行git clone 代码： git clone 仓库地址 ③将更改文件放入提
gitlab 上建立一个vue项目
aleluye的博客
01-17 682
创建vue项目
Gitlab CI/CD 自动化打包部署前端（vue）项目
biubiubiuPlus的博客
03-12 1673
4.本地将公钥(~/.ssh/id_rsa_vue_deploy.pub)添加到服务器的授权密钥中。2.在/etc/nginx/conf.d目录下，新增nginx配置文件。10.在gitlab上查看runner和流水线。四、GitLab Runner安装与注册。5.输入您获得的令牌以注册Runner。2.安装GitLab Runner。4.输入您的GitLab实例URL。6.设置CI/CD变量–值为私钥。6.输入对这个Runner的描述。7.输入Runner的tag。8.输入Runner执行程序。
Vue项目配置git忽略文件
Komorebi_00的博客
08-19 6839
如果一个文件已经被 Git 跟踪，那么再将这个文件添加到 .gitignore 中并不会忽略文件变更。在开发阶段，有时候需要临时忽略本地仓库中已提交的文件的变更。Git会告诉我们，.gitignore的第3行规则忽略了该文件，于是我们就可以知道应该修订哪个规则。注：以上步骤不会从系统中删除文件，只是告诉Git以后忽略该文件的变更。也可以通过以下方式进行。这主要是为了防止文件被开发者修改。...
vscode vue2/vue3的相关配置(包含npm,Git)
u014678583的博客
03-23 3311
这篇文章主要是为了保存留着自己备用 一、在vscode中安装这些插件 二、在settings.json中配置 （全局覆盖） { "files.autoSave": "afterDelay", "window.zoomLevel": 0, "editor.fontSize": 16, "editor.formatOnPaste": true, "............
vue3+ts+vite项目打包配置
08-09
对于Vue 3 + TypeScript + Vite项目的打包配置，你可以按照以下步骤进行设置： 1. 安装依赖：在项目根目录下运行以下命令安装所需的依赖项： ``` npm install --save-dev vite @vitejs/plugin-vue@next typescript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值