vue04

最新推荐文章于 2024-04-06 23:32:00 发布

飒泛

最新推荐文章于 2024-04-06 23:32:00 发布

阅读量70

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46490192/article/details/127621353

版权

Vue CLI

快速开发的一套完整系统，主要先使用脚手架功能。

安装

$ npm install -g @vue/cli

安装完毕后，在 cmd 命令行下，可以使用 vue --version 来查看版本信息

创建项目

利用命令行方式创建项目：

执行创建命令:

$ vue create vue-cli-demo

根据向导选择预设还是手动:

? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

手动选择项目使用特性:

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

选择 Vue 版本:

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

选择 css 预处理器:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  sass
> less
  stylus

选择在哪儿放置配置文件:

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

是否保存上述所先为预设项:

? Save this as a preset for future projects? (y/N) n

选择完毕后，会根据所选特性安装依赖，创建项目结构
项目创建完毕后，可看到类似如下提示:

success Saved lockfile.
Done in 31.00s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-cli-demo.
👉  Get started with the following commands:

 $ cd vue-cli-demo
 $ npm run serve

$ cd vue-cli-demo
$ npm run serve

运行成功，显示：

 DONE  Compiled successfully in 18335ms 上午10:07:53


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.7.172.58:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

启动成功后，会在本地开启一个 webserver 放置开发阶段的代码，可以在浏览器中访问 http://localhost:8080/ 查看开发测试效果

项目结构

|- public   这个目录中放置的是项目的静态 html 文件及相关资源
|- src 		开发过程中所编写的项目源文件
	|- main.js	这是整个项目的 JS 入口文件（不能改名称）
|- babel.config.js 	这是babel工具的配置文件
|- package.json		这是整个项目的配置文件
|- vue.config.js	这是 VueCLI 的配置文件

package.json

scripts:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
}

在命令行下可使用 npm run 来运行这些脚本

serve: 开发任务，会启动开发服务器
build: 生产任务，项目开发完毕后可打包构建

main.js

import { createApp } from 'vue'

createApp({}).mount('#app')

单文件组件

SFC，后缀名为 *.vue 的文件是单文件组件

能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中:

<template>
	<!-- 模板语法所表示的视图 -->
</template>

<script>
	// JS 逻辑交互
    export default {
        data() {
            return {}
        },
        methods: {},
        computed: {},
    }
</script>

<style lang="less" scoped>
	/*
     * 样式
     * 添加 scoped 表示当前所书写的样式仅在当前组件内部有作用
     */
</style>

在 VSCode 中推荐安装 Volar 扩展，这样在书写 SFC 时可获得更好的体验