@vue/cli脚手架的安装

@vue/cli脚手架的安装

webpack自己配置环境很麻烦，下载@vue/cli包，用vue命令创建脚手架项目

@vue/cli是vue官方提供的一个全局模块包(vue命令)，此包用于创建脚手架项目

好处

0配置webpack

babel支持、

css，less支持

开发服务器支持

安装

把@vue/cli模块包安装到全局，电脑拥有vue命令，才能创建脚手架工程

全局安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本

vue -V

如果出现版本号，安装成功，否则失败

@vue/cli创建项目启动服务

使用vue命令创建脚手架项目(项目名不能带大写字母，中文和特殊符号)

创建项目

//vue create 是命令  vuecli-demo是文件夹名
vue create vuecli-demo

设置镜像

会提示是否使用淘宝镜像安装，这里输入y然后回车

 Your connection to the default yarn registry seems to be slow.
 Use https://registry.npm.taobao.org for faster installation?

选择模板

可以上下箭头选择，弄错了ctrl+c 重来

回车，等待生成项目文件夹+文件+下载必须的第三方包

进入脚手架项目，启动内置的热更新本地服务器

cd vuecli-demo

npm run serve
or
yarn serve

启动成功了(底层node+webpack热更新服务)

打开浏览器输入上述地址

@vue/cli目录和代码分析

vuecli-demo       #项目目录
    node_modules  项目依赖的第三方包
    public   静态文件目录
        index.html  但页面的html文件（网页浏览的就是它）
    src  业务文件夹  &****
        assets  静态资源
        components  组件目录
           HelloWorld.vue  欢迎页面的vue代码文件
        APP.vue  整个应用的根组件
        main.js  主入口文件
    .gitignore  git提交忽略的配置
    babel.config.js babel配置
    package.json  依赖包列表
    README.md  项目说明
    vue.config.js vue的配置文件

主要文件及含义

node_modules 下都是下载的第三方包
public/index.html  ---浏览器运行的网页
src/main.js    webpack打包的入口文件
src/App.vue    vue项目入口页面
package.json   依赖包列表文件
vue.config.js vue的配置文件

@vue/cli项目架构了解

知道项目入口，以及代码执行顺序和引入关系

@vue/cli自定义配置

项目中没有webpack.config.js文件，应为@vue/cli用的vue.config.js

module.exports = defineConfig({
  // 覆盖webpack的配置
  devServer: {
    //自定义服务配置
    open: true, //自动打开浏览器
    port: 3000,
  },
  
 })

eslint了解

• main.js随便声明一个变量,但是使用，终端和页面都报错了
• 代码步严谨

在这里插入图片描述

解决：

1：手动解决掉错误，后面项目中会讲如何解决

2：暂时关闭eslint检查,在vue.config.js中配置后重启服务

module.exports = defineConfig({
  ...
  lintOnSave: false, // 关闭eslint检查
  transpileDependencies: true,
})

@vue/cli单文件

单vue文件好处，独立作用域互不影响

• vue推荐采用.vue文件来开发项目

• template里只能有一个根标签

• vue文件-独立模块 --作用域互不影响

• style配合scoped属性，保证样式只针对当前template内标签生效

• vue配合webpack，把他们打包起来插入到index.html

// template 只能有一个根标签  
<template>
  <div>

  </div>
</template>

<script>
  export default {
    
  }
</script>
//  当前组件的样式  设置scoped 可以保证样式只对当前页面有效
<style scoped>

</style>

@vue/cli欢迎界面清理

• src/App.vue 默认有很多内容，可以全部删除（然后输入vb快捷生成代码框架[前提是要安装了下面的插件]）
  

• assets和components文件夹下一切都删除掉(不要默认的欢迎页面)

vscolde插件补充

vue文件代码高亮插件

代码提示插件

快速生成框架代码

脚手架项目中定义全局过滤器

过滤时间格式

• 项目中下载monment模块

yarn add moment

• main.js引入monment并创建全局过滤器

  import moment from 'moment'
  // 全局过滤器
  
  Vue.filter('formData', (val) => {
    return moment(val).format('YYYY-MM-DD  h:mm:ss')
  })
  
  

• 项目中的任何一个vue文件都可以使用

  {{ obj.time | formData }}