Vue-cli的简介与使用

深碍√TFBOYSˉ_ 2021-08-19 15:43 407阅读 0赞

**目录**

一 Vue-cli简介

二 安装node.js

三 使用vue-cli

四 项目生成结构

五 生成效果

--------------------

# **一 Vue-cli简介** #

我们后端使用 maven 来创建项目，有两个目的，一是通过 maven 的依赖机制，能够快速的管理依赖。二是通过 maven 来确定项目的结构，所谓项目的结构，就是项目里有哪些文件和文件夹，文件夹是一个怎样的层级关系。

问题来了？一个 vue 项目里的项目结构是怎样的呢？我们能不能快速的获得这样的项目结构呢？

可以通过 vue-cli 这种脚手架工具来解决这个问题。vue-cli 里存放了很多常用的项目骨架，直接拿来就可以搭建出一个拥有比较成熟项目结构的项目。

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

1 vue cli有2.0和3.0版本之分。

vue cli3.0版本和vue cli2.0版本的区别，请参考下面博客。

[https://www.jianshu.com/p/157b2d5c35a4][https_www.jianshu.com_p_157b2d5c35a4]

2 Vue-cli3.0版本后如何使用旧版本参考

https://blog.csdn.net/qq\_34119437/article/details/89531041

npm install -g @vue/cli-init

3 Vue cli的2.x和3.x的卸载方法

[https://blog.csdn.net/shi851051279/article/details/84928798][https_blog.csdn.net_shi851051279_article_details_84928798]

4 Vue cli 3.x的视频

[https://www.imooc.com/video/18559][https_www.imooc.com_video_18559]

5 淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装之后，之前使用npm命令的地方就可以替换为cnpm

cnpm install vue-cli -g
    cnmp install
    cnpm run dev

# **二 安装node.js** #

要想使用 vue-cli，得先安装 node.js

node.js 是一个可以让前端运行在 node.js 提供的服务器上的一个工具，换句话说，就是提供了一个服务器。

1 node官网

[https://nodejs.org/zh-cn/download/][https_nodejs.org_zh-cn_download]

2 下载和安装node.js

3 检查安装是否成功

C:\Users\cakin>node -v
    v12.13.0
    
    C:\Users\cakin>npm -v
    6.12.0

# **三 使用vue-cli** #

1 全局安装vue-cli

npm install --global vue-cli

*  npm：指明使用 node.js 的命令。
 *  install：安装
 *  vue-cli：要安装的工具
 *  \--global：全局安装

2 创建一个基于 webpack 模板的新项目

使用 vue list 命令可以列出当前官方提供的骨架，可以使用这些骨架来搭建我们的项目。

使用 webpack 模板创建一个项目的命令如下：

F:\vue>vue init webpack todolist
    
    ? Project name todolist
    ? Project description A Vue.js project
    ? Author
    ? Vue build standalone
    ? Install vue-router? No
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
    
    
       vue-cli · Generated "todolist".
    
    
    
    
    # Installing project dependencies ...
    # ========================

3 进入F:\\vue\\todolist>目录

4 在todolist目录下执行下面命令

npm run dev
    DONE  Compiled successfully in 5350ms                                                                          17:35:10
    
    I  Your application is running here: http://localhost:8080

5 测试

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# **四 项目生成结构** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

1 index.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>todolist</title>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

2 项目入口文件main.js

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    
    
    Vue.config.productionTip = false
    
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>'
    })

3 修改单文件组件app.vue

<template>
      <div>
        123
      </div>
    </template>
    
    
    <script>
    import HelloWorld from './components/HelloWorld'
    
    
    export default {
    }
    </script>
    
    
    <style>
    
    
    </style>

# **五 生成效果** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

[https_www.jianshu.com_p_157b2d5c35a4]: https://www.jianshu.com/p/157b2d5c35a4
[https_blog.csdn.net_shi851051279_article_details_84928798]: https://blog.csdn.net/shi851051279/article/details/84928798
[https_www.imooc.com_video_18559]: https://www.imooc.com/video/18559
[https_nodejs.org_zh-cn_download]: https://nodejs.org/zh-cn/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/b9830ad633fe42479ef415fb3eccb94c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/66e40848b50b46d5a7a147ec6857773a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/17f0f33ef43c497894464ec7582577c6.png