@vue/cli脚手架

 目录

好处

安装

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

@vue/cli目录和代码分析

@vue/cli项目架构了解

@vue/cli自定义配置

eslint了解

@vue/cli单文件

@vue/cli欢迎界面清理

vscode插件补充

---

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

选择模板

上下箭头选择，如果弄错了 ctrl+c 重来

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

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

cd vuecli-demo

npm run serve
or
yarn serve

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

 按住 ctrl 并点击网址可在浏览器中打开项目

@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配置 把 JavaScript 中 es2015+ 的新语法转化为 es5，让低端运                                      行环境(如浏览器和 node )能够认识并执行。

        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项目架构了解

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

                       

  整个过程webpack在管理

@vue/cli自定义配置

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

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 覆盖webpack的配置
  devServer: { // 自定义服务配置
    open: true,
    port: 3000,
  },
  transpileDependencies: true
})

eslint了解

• main.js 随便声明一个变量，但是不使用，结果中断和页面都报错
• 代码不严谨

                

        

 解决：

1. 手动解决，以后讲...
2. 暂时关闭eslint检查，在vue.config.js中配置后重启服务

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ...
  lintOnSave: false, // 关闭eslint检查
  transpileDependencies: true
})

@vue/cli单文件

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

•  vue推荐采用.vue文件来开发项目
• template结构里只能有一个根标签（在vue2中）
• vue文件-独立模块--作用域互不影响
• style配合scoped属性，保证样式只针对当前template内标签生效
• vue配合webpack，把它们打包起来插入到index.html

@vue/cli欢迎界面清理

• src/App.vue默认有很多内容，可以全部删除留下框
• assets和components文件夹下一切都删除掉(不要默认的欢迎界面)

vscode插件补充

代码高亮插件---vetur

代码提示插件---VueHelper

vue快速生成结构插件---Vue VSCode Snippets