vue-cli脚手架

什么是 Vue CLI？

Vue CLI 是 Vue.js 官方提供的标准脚手架工具，用于快速生成 Vue 项目的基础结构。它预先定义了合理的目录结构和基础代码，让开发者能够专注于业务逻辑而非重复的配置工作——就像 Maven 的archetype 一样。

主要功能

  • 统一的目录结构：标准化项目组织方式
  • 本地调试服务器：内置开发服务器，支持热重载
  • 热部署：代码修改后自动刷新页面
  • 单元测试：集成测试框架支持
  • 生产构建：一键打包上线，支持代码压缩、优化

环境搭建

安装NodeJS

提示：Vue CLI 目前兼容 Node.js 18+，推荐使用最新的 LTS 版本。

确认nodejs安装成功:

  • cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
  • cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

这个npm就是一个软件包管理工具，就和Linux下的apt软件安装差不多！

安装Node.js淘宝镜像加速器（cnpm）

这样子的话,下载会快很多~

# -g 就是全局安装
npm install cnpm -g

# 若安装失败，则将npm换成淘宝镜像
# 因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org
# 然后再执行
npm install cnpm -g

安装的位置:C:\Users\Administrator\AppData\Roaming\npm

安装vue-cli

#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list

第一个vue-cli应用程序

创建一个Vue项目,我们随便建立一个空的文件夹在电脑上。

我的地址：F:\idea\vue-demo

创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue
vue init [模板] [项目名]

一路都选择no即可

说明：

  • Project name：项目名称，默认回车即可
  • Project description：项目描述，默认回车即可
  • Author：项目作者，默认回车即可
  • Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
  • Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
  • Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
  • Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
  • Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

进入myvue目录里，安装依赖环境

//添加项目依赖
npm install

执行完成后,目录多了很多依赖

image-20220611185859773

备注：当出现问题时，可以查看提示进行处理如下

//启动项目
npm run dev
//关闭项目
Ctrl+C 并输入Y

image-20220611203408634

Webpack 简介（Vue CLI 底层构建工具）

Vue CLI 内部使用 Webpack 进行模块打包和项目构建。理解 Webpack 有助于解决自定义配置问题。

什么是 Webpack？

Webpack 是一个模块打包器，它能够将项目中各种资源（JS、CSS、图片等）视为模块，并打包成浏览器能识别的静态资源。

npm install webpack -g  //打包工具
npm install webpack-cli -g	//客户端

测试安装成功: 输入以下命令有版本号输出即为安装成功

webpack -v
webpack-cli -v

核心概念

概念 说明
Entry 入口文件，指定打包的起点
Output 输出配置，指定打包结果的位置
Loader 转换器，处理非 JS 文件（如 CSS、图片）
Plugin 插件，执行更复杂的任务（如压缩、优化）
Mode 模式（development/production），影响打包优化

配置

创建webpack.config.js配置文件

  • entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
  • output：输出， 指定WebPack把处理完成的文件放置到指定路径
  • module：模块， 用于处理各种类型的文件
  • plugins：插件， 如：热更新、代码重用等
  • resolve：设置路径指向
  • watch：监听， 用于设置文件改动后直接打包
module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

使用WebPack

  1. 创建项目
  2. 创建一个名为modules的目录，用于放置JS模块等资源文件
  3. 在modules下创建模块文件，如hello.js，用于编写JS模块相关代码
//暴露一个方法：sayHi
exports.sayHi = function(){
    document.write("<div>Hello Webpack</div>");
}
  1. 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性
//require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();
  1. 在idea控制台输入webpack，进行打包

image-20220612000914075

  1. 在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件
<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>首页</title>
	</head>
	<body>
		<script src="dist/js/bundle.js"></script>
	</body>
</html>

说明

# 参数--watch 用于监听变化，发生变化，就自动重新打包【热部署】
webpack --watch

项目案例

采用实战教学模式并结合ElementUI组件库，将所需知识点应用到实际中，以最快速度掌握Vue的使用

创建工程

注意：命令行都要使用管理员模式运行

  1. 创建一个名为hello-vue的工程vue init webpack hello-vue。
  2. 安装依赖， 我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件。
#进入工程目录
cd hello-vues
#安装vue-routern 
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启功测试
npm run dev

  1. npm命令解释

    • npm install moduleName：安装模块到项目目录下

    • npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置

    • npm install -save moduleName：–save的意思是将模块安装到项目目录下， 并在package文件的dependencies节点写入依赖，-S为该命令的缩写

    • npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

创建登录页面

  1. 创建如下结构

    • assets：用于存放资源文件

    • components：用于存放Vue功能组件

    • views：用于存放Vue视图组件

    • router：用于存放vue-router配置

  2. 创建首页视图，在views目录下创建一个名为Main.vue的视图组件

  3. 创建登录页视图，在views目录下创建名为Login.vue的视图组件，其中el-*的元素为ElementUI组件

    image-20220614143118195

    <template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onsubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      form:{
        username:'',
        password:''
      },
      //表单验证，需要在 el-form-item 元素中增加prop属性
      rules:{
        username:[
          {required:true,message:"账号不可为空",trigger:"blur"}
        ],
        password:[
          {required:true,message:"密码不可为空",tigger:"blur"}
        ]
      },

      //对话框显示和隐藏
      dialogVisible:false
    }
  },
  methods:{
    onSubmit(formName){
      //为表单绑定验证功能
      this.$refs[formName].validate((valid)=>{
        if(valid){
          //使用vue-router路由到指定界面，该方式称为编程式导航
          this.$router.push('/main');
        }else{
          this.dialogVisible=true;
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.login-box{
  border:1px solid #DCDFE6;
  width: 350px;
  margin:180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title{
  text-align:center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

  4. 创建路由，在router目录下创建一个名为index.js的路由配置文件

    import Vue from "vue";
import Router from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//使用
Vue.use(Router);
//导出
export default new Router({
  routes:[
    {
      //首页
      path:'/main',
      component: Main
    },{
      //登录页
      path:'/login',
      component: Login
    }
  ]
});

  5. 配置main.js文件

    import Vue from 'vue'
import App from './App'
import router from './router'

//导入Element
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//使用
Vue.use(router)
Vue.use(Element)

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

  6. App.vue，显示组件

    <template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>
posted @ 2022-07-29 11:19  克峰同学  阅读(79)  评论(0)    收藏  举报