Vue CLI脚手架

申小兮
277 阅读6分钟
1、node_modules依赖包

①我们通过项目终端输入npm i，就会生成该依赖包，依赖包会自动根据package.json文件中所有需要的东西进行封装下载，例如：jquery，vue2等等
②该依赖包因为承载项目的所有内容，在项目大的时候其所占内存也会很大。
③在项目传发时，依赖包是可以删除的，他人只需要输入npm i，即可下载回来

2、webpack安装

①npm install webpack@4 --save--dev：-save局部安装webpack

②npm install webpack -g：-g全局安装webpack

3、本篇项目例子是继续前篇文章的项目例子

blog.csdn.net/qq\_5147874…

一、Plugin

1、简介

（1）Plugin相当于一个插件
（2）功能
①可用于添加版权
②打包html到dist文件夹

  • 拓展：项目完成后，项目部署到服务器上的就只有dist文件夹，但是前面文章所学内容并未将html打包到dist文件夹

③压缩js

  • 拓展
  1. 生产环境：所有代码挤在一块，不留空隙，为了减少空间
  2. 开发环境：间隔回车1. 错落有致，可读性强

（3）loader与plugin的区别
①loader主要用于转换某些类型的模块，是一个转换器
②plugin是插件，是对webpack本身的扩展，是一个扩展器

2、添加版权的plugin

webpack内置就有plugin，因此只需要在webpack.config.js中的plugins中配置插件

const webpack = require('webpack')

plugins:[
	new webpack.BannerPlugin('最终版权归')
]

image.png image.png image.png

 3、打包html的plugin

（1）安装html-webpack-plugin

npm i html-webpack-plugi

（2）在webpack.config.js的plugins中配置htmlWebpackPlugin

const htmlWebpackPlugin = require('html-webpack-plugin')

plugins:[
    new webpack.BannerPlugin('最终版权归申小兮所属'),
    new htmlWebpackPlugin()
]

（3）webpack打包完，在dist文件夹中我们会看到多生成了一个html文件 image.png image.png

（4）但是打开index.html查看，发现图片无法显示，是因为我们原先通过配置css-loader时，指定了html中引用图片的相对路径 image.png

// 处理css中图片的使用
{
  test: /\.(png|jpg|git)$/,
  /* 数组对象形式 */
  use: [
    {
      // 使用file loader，解析文件路径
      loader: "file-loader",
      // 配置
      options: {
        // 指定html中引用图片的相对html文件的路径
        // publicPath: "./dist/",
        // 指定文件名，一般会放在一个img相关的文件夹中
        name: "imgs/[contenthash].[ext]",
      },
    },
  ],
},

（5）现在dist中已经有html文件了，就不需要设置图片的相对html文件路径，将publicPath: "./dist/"注释

// 处理css中图片的使用
{
  test: /\.(png|jpg|git)$/,
  /* 数组对象形式 */
  use: [
    {
      // 使用file loader，解析文件路径
      loader: "file-loader",
      // 配置
      options: {
        // 指定html中引用图片的相对html文件的路径
        // publicPath: "./dist/",
        // 指定文件名，一般会放在一个img相关的文件夹中
        name: "imgs/[contenthash].[ext]",
      },
    },
  ],
},

image.png 现在dist已经有html文件了，但是却找不到#app的template
①需要在配置htmlWebpackPlugin中添加指定html文件

plugins: [
  new webpack.BannerPlugin("最终版权归申小兮所属"),
  new htmlWebpackPlugin({
    template:'./class.html'
  }),
],

注意： class.html是项目中的html文件，不是dist文件夹中生成的html文件
image.png
②class.html文件也不需要再引入js，将引入语句注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app"></div>
    <!-- <script src="./dist/bundle.js"></script> -->
</body>
</html>

③webpack打包，运行dist文件夹下的index.html文件
image.png

 4、压缩js的plugin

（1）安装

npm i uglifyjs-webpack-plugin@1

（2）配置

const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

plugins: [
  new webpack.BannerPlugin("最终版权归申小兮所属"),
  new htmlWebpackPlugin({
    template:'./class.html'
  }),
  new uglifyjsWebpackPlugin(),
],

（3）webpack打包，查看dist文件夹下的bundle.js文件

image.png

二、搭建本地服务

1、搭建的原因

每次预览效果都需要webpack打包，比较麻烦，而webpack提供了一个可选的本地开发服务器，可以实现浏览器自动刷新显示修改后的结果

2、安装

npm install webpack-dev-server

3、配置

（1）在package.json文件中配置scripts的dev

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack-dev-server"
},

（2）终端启功

npm run dev

（3）如果启动报错，很可能是webpack，webpack-dev-server，css-loader等等的版本冲突问题，需要进行降级尝试
例如：css-loader原先为版本5，就可以试着降到4版本或3版本，然后再启动

npm install css-loader@3

4、login.vue文件修改内容后，不需要手动webpack，会自动更新

根据前面所学，每个项目都是手动去配置，效率就很低，因此，引入Vue CLI脚手架，通过脚手架帮我们完成这些工作。
接下来就让我们一起学习一下脚手架吧🧐

三、Vue CLI脚手架

1、介绍

（1）CLI是Command-Line Interface，翻译为命令行界面，俗称脚手架
（2）Vue CLI是Vue官方发布的项目脚手架
（3）使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置
（4）Vue官方文档也有相关内容 v2.cn.vuejs.org/v2/guide/in…

image.png

（5）Vue CLI也有自己的文档 cli.vuejs.org/zh/guide/

2、安装CLI

（1）右击电脑左下角的开始，然后打开Windows PowerShell(管理员)，输入以下代码【注意小编这里安装的是最新Vue CLI4.x版本的脚手架，需要Node.js v8.9及以上版本（推荐v10以上）】

npm install -g @vue/cli

image.png

image.png

（2）安装Vue CLI 2.x版本，步骤和上面，代码如下

npm install -g @vue/cli-init

接下来的项目，小编将用新版本脚手架给大家介绍简单操作

3、创建项目

（1）在项目终端输入vue create 项目名，然后回车，进入初始化项目功能

vue create my-project

（2）上下键是移动选中，这里先选择自定义创建Manually select features，回车到下一步 image.png （3）然后此处先默认回车，进入到下一步 image.png （4）此处小编选择2.x的vue版本，回车进入下一步 image.png （5）ESLint代码规范，当代码写不规范的时候会报错，默认回车，进入下一步 image.png （6）接下来也是默认回车，进入下一步 image.png （7）此处选择我们所熟知的package.json，然后回车，进入下一步 image.png （8）接下来的意思是，是否将上面的设置保存，看个人需求输入y/n，然后回车，就会开始创建项目，等待加载完毕 image.png
（9）加载完毕的效果图如下 image.png

4、项目文件介绍

（1） public文件夹中
①favicon.ico文件


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3fffb400d0a343809201eb1ea253fb27~tplv-k3u1fbpfcp-watermark.image?)

②index.html文件
与之前手动配置打包的html文件类似 image.png （2）src文件夹
①package.json image.png ②main.js入口文件 image.png （3）更多文件含义，小伙伴们可以自己去探索🧐

5、启动项目

（1）可以根据启动提示，先进入到项目目录

 cd my-project

（2）然后输入以下代码，启动项目
启动项目的语句也可在上面介绍的package.json文件查看

npm run serve

（3）Ctrl+单机：打开提供的网址 image.png image.png

 6、创建一个页面组件

（1）简单内容显示步骤
①统一在components文件夹下创建UserInfo.vue文件

<template>
    <div>
        <h1>用户信息页</h1>
        <h2>{{ user }}</h2>
    </div>
</template>
<script>
export default{
    name:'UserInfo',
    data(){
        return {
            user:'申小兮'
        }
    }
}
</script>

②在App.vue文件导入新建的页面组件，注册，使用

<script>
import HelloWorld from './components/HelloWorld.vue'
// 1、导入
import UserInfo from './components/UserInfo.vue';
 
export default {
  name: 'App',
  components: {
    HelloWorld,
    //2、注册
    UserInfo
  }
}
</script>

<template>
  <div id="app">
    <!-- 3、使用 -->
    <user-info></user-info>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

image.png （2）关于vue文件的编写，VSCode提供了很多好用的插件，能够提示内容
①下面是小编用到的有关vue的插件，更多好用插件小伙伴们可以去搜索 image.png
②下面是小编的展示，整个vue框架都能一次性生成🧐 录制_2023_04_14_08_57_18_573.gif （3）打包项目
①在终端ctrl+c，y，回车，终止项目，然后在终端输入打包命令，打包命令，要看package.json文件的build语句
image.png
②根据语句，输入以下代码，就行打包

npm run build

image.png ③打包完成后，我们会在项目文件夹下看到生成的dist文件夹
image.png

四、拓展：Vue CLI 2搭建脚手架

1、进入项目终端，输入搭建代码vue init webpack 项目名

vue init webpack try-vue2

2、初始化项目功能
image.png

avatar
文章
阅读
粉丝