Vue-cli的简介与使用

最新推荐文章于 2024-07-04 13:22:24 发布

chengqiuming

最新推荐文章于 2024-07-04 13:22:24 发布

阅读量3.6k

点赞数 6

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/chengqiuming/article/details/102769347

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

一 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

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

4 Vue cli 3.x的视频

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/

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 测试

四项目生成结构

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>
    <!-- built files will be auto injected -->
  </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>

五生成效果

chengqiuming

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
Vue-cli的简介与使用

一Vue-cli简介Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。二安装node.js1 node官网https://nodejs.org/zh-cn/download/2下载和安装node.js3检查安装是否成功C:\User...
复制链接

扫一扫