Vue笔记(2) - vue-cli

被猫吃的竹子

已于 2022-07-28 09:59:46 修改

阅读量793

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2022-07-27 22:43:27 首次发布

本文链接：https://blog.csdn.net/qq_18594435/article/details/126022691

本文介绍了Vue CLI的基本使用，包括安装、创建项目和运行。在创建项目时，详细说明了配置选项，如Babel和Linter的选择。接着，概述了项目结构中的src目录。最后，简单讨论了Vue的运行流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue-cli 基本使用

1.1 安装vue-cli

vue-cli 就是快速搭建一个基于webpack工程化的vue项目。 vue-cli中文官网

安装: npm install -g @vue/cli (install可简写为i npm i -g @vue/cli)

1.2 搭建vue项目

创建项目: vue create 项目名

vue create demo-first

1. 首先出现以下选项

如果选择前两个会直接创建项目，如果选择第三个需要继续配置。建议使用手动。

babel适用于解决JS兼容性的，强烈建议使用。

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)            // 使用vue3且使用预设的配置创建(包含了 babel和eslint)
  Default ([Vue 2] babel, eslint)            // 使用vue2且使用预设的配置创建(包含了 babel和eslint)
  Manually select features                    // 手动选择

2. 选择在项目中需要安装那些功能

Linter用于约束代码风格的，例如配置了只能使用单引号，那么代码中就不能使用双引号。建议先不要使用。

? 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    // less
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

3. 选择Vue的版本。

4. 选择 less还是scss

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus

5. 选择 babel,ESLint... 这些的配置放在哪里。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files        // 独立的文件中
  In package.json                    // 在package.json中

6. 是否将这些选择存为预设，方便下次直接使用

? Save this as a preset for future projects?

看到以上提示，项目创建成功！！！！

1.3 运行

cd demo-first

npm run serve

查看package.json可以看到有两个脚本命令(serve和build)

serve 开发阶段使用的，build项目上线时进行打包(会对代码进行压缩和混淆)

2. 项目结构

|- node_modules        存放第三方的文件夹
|- public                
    |- favicon.ico          图标
    |- index.html           主页面(所有的vue都作为组件显示在这个页面)
|- src                   源代码
|- babel.config.js       babel的配置文件

2.1 src目录介绍

|- src
    |- assets            存放项目中用到的静态资源,css,图片
        |- logo.png
    |- components        存放自定义的组件
    |- App.vue            项目的根组件，在这里写什么就能在页面看到什么
    |- main.js            入口文件，整个项目的运行要先执行该文件

3. vue运行流程

在工程化的项目中，vue通过main.js将App.vue的结构渲染到index.html的指定位置。

// 导入Vue，得到Vue构造函数
import Vue from 'vue'
// 导入App这个组件
import App from './App.vue'

// 
Vue.config.productionTip = false

// 创建Vue实例
new Vue({
  // 指定将哪一个组件渲染到index.html中
  render: h => h(App),
}).$mount('#app')   // 指定渲染的位置

$mount('#app') 和 el:'#app' 的作用是一样的。