Vue CLI脚手架

文章列表

Vue CLI脚手架

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、本篇项目例子是继续前篇文章的项目例子

Vue2之webpack篇（二）Loader_申小兮IU的博客-CSDN博客loader处理css、图片、ES6转ES5、打包，分离vue，父子组件传参https://blog.csdn.net/qq_51478745/article/details/128596414?spm=1001.2014.3001.5501

一、Plugin

1、简介

（1）Plugin相当于一个插件

（2）功能

①可用于添加版权

②打包html到dist文件夹

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

③压缩js

拓展

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

（3）loader与plugin的区别

①loader主要用于转换某些类型的模块，是一个转换器

②plugin是插件，是对webpack本身的扩展，是一个扩展器

2、添加版权的plugin

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

const webpack = require('webpack')

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

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文件

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

（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]",},},],
},

现在dist已经有html文件了，但是却找不到#app的template

①需要在配置htmlWebpackPlugin中添加指定html文件

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

注意：class.html是项目中的html文件，不是dist文件夹中生成的html文件

②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文件

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文件

二、搭建本地服务

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官方文档也有相关内容安装 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/v2/guide/installation.html

（5）Vue CLI也有自己的文档

介绍 | Vue CLI🛠️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/guide/

2、安装CLI

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

npm install -g @vue/cli

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

npm install -g @vue/cli-init

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

3、创建项目

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

vue create my-project

（2）上下键是移动选中，这里先选择自定义创建Manually select features，回车到下一步

（3）然后此处先默认回车，进入到下一步

（4）此处小编选择2.x的vue版本，回车进入下一步

（5）ESLint代码规范，当代码写不规范的时候会报错，默认回车，进入下一步

（6）接下来也是默认回车，进入下一步

（7）此处选择我们所熟知的package.json，然后回车，进入下一步

（8）接下来的意思是，是否将上面的设置保存，看个人需求输入y/n，然后回车，就会开始创建项目，等待加载完毕

（9）加载完毕的效果图如下

4、项目文件介绍

（1） public文件夹中

①favicon.ico文件

②index.html文件

与之前手动配置打包的html文件类似

（2）src文件夹

①package.json

②main.js入口文件

（3）更多文件含义，小伙伴们可以自己去探索🧐

5、启动项目

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

 cd my-project

（2）然后输入以下代码，启动项目

启动项目的语句也可在上面介绍的package.json文件查看

npm run serve

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

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>

（2）关于vue文件的编写，VSCode提供了很多好用的插件，能够提示内容

①下面是小编用到的有关vue的插件，更多好用插件小伙伴们可以去搜索

②下面是小编的展示，整个vue框架都能一次性生成🧐

（3）打包项目

①在终端ctrl+c，y，回车，终止项目，然后在终端输入打包命令，打包命令，要看package.json文件的build语句

②根据语句，输入以下代码，就行打包

npm run build

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

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

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

vue init webpack try-vue2

2、初始化项目功能

Vue CLI脚手架

一、Plugin

1、简介

2、添加版权的plugin

3、打包html的plugin

4、压缩js的plugin

二、搭建本地服务

1、搭建的原因

2、安装

3、配置

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

三、Vue CLI脚手架

1、介绍

2、安装CLI

3、创建项目

4、项目文件介绍

5、启动项目

6、创建一个页面组件

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

相关问题

公告