20、vue-cli脚手架

最新推荐文章于 2024-01-04 18:10:37 发布

zjh的学习乐园

最新推荐文章于 2024-01-04 18:10:37 发布

阅读量608

点赞数 2

分类专栏： vue基础文章标签： vue js vue.js node.js

本文链接：https://blog.csdn.net/weixin_46841213/article/details/115792500

版权

vue基础专栏收录该内容

25 篇文章 2 订阅

订阅专栏

vue-cli脚手架

1、什么是vue-cli
2、vue-cli 2.x版本介绍
3、vue脚手架3.X+版本介绍
- 3.1、安装vue-cli 3.x+
- 3.2、创建项目
4、vue-cli3与2版本区别

1、什么是vue-cli

vue-cli是vue的脚手架，对项目的搭建，打包等都很方面。
注意：以下所有的安装都要英文路径，以免出现问题。我们在开发时，最好都是英文路径，防止因为编码等问题出现错误，在安装Vue-cli之前，首先先安装Node。
安装完node后安装淘宝镜像和webpack。由于国内访问速度较慢，建议将 NPM 源设置为国内的镜像，可以大幅提升安装速度。

#安装淘宝镜像 
npm install -g cnpm --registry=https://registry.npm.taobao.org 
#安装webpack 
cnpm install webpack-cli -g

2、vue-cli 2.x版本介绍

2.1、vue-cli 2.x安装

#npm安装vue2.X 
npm install vue-cli -g 
#淘宝镜像安装vue2.X 
cnpm install vue-cli -g

查看是否安装成功
vue -V ------>出现了版本号就是安装成功

2.2、vue 2. X构建项目

创建项目需要注意：项目名不能有中文，不支持驼峰(含有大写字母)

#创建名为vue-cli2x的项目 
vue init webpack vue-cli2x

输入完创建项目的指令回车即可
在这里插入图片描述
eslint不建议启用，因为他是严格规范代码的写法（会因为代码书写格式报错），新手还是不安装的好。
选好启用方式—》回车----》加载项目模板---->加载完成后会出现to get started:

①、cd 项目名—>进入到项目
②、npm run dev ----->运行项目
③、打开浏览器---->输入创建项目提供的网址
在这里插入图片描述

2.3、目录结构介绍

2.3.1、2.x的项目目录结构

在这里插入图片描述
说明：

vue-cli2x #项目名称(创建项目输入的名称) 
#一级目录 
build #项目构建(webpack)相关代码 
config #配置目录，包括端口号 
node_modules #npm install 安装的依赖代码库 
src #我们存放的源码，我们开发的所有代码都放在src目录下。 
staic #存放一些第三方静态资源的目录 
#一级文件 
.babelrc #babel的一些配置，（将es6编译成es5的一些配置） 
.editorconfig #编辑器的一些配置（包括编码格式，缩进风格，换行格式） 
.eslintignore #配置我们不会对build文件和config文件进行语法检查。 
.eslintrc.js #eslint的配置文件，主要是定义一些代码编写风格的规则。 
.gitignore #配置git仓库忽略的一些文件（不会上传） 
index.html #入口html 文件。 
package.json #项目的一些配置信息（项目的一些具体信息） 
package-lock.json #版本管理，npm生成是的一份文件，用于记录当前安装的各个npm package的具体 
来源和版本号 
README.md #项目说明 
#src 文件夹下的 目录： 
assets 文件夹 # 存放静态资源，例如：图片，font字体等。 
conponents 文件夹 # 存放组件，里面你可以在建文件来分组件，比如建 users， table 文件夹 
App.vue 文件： # App.vue是我们的主组件，所有页面都是在App.vue下进行切换的 
main.js 文件： # 主要作用是初始化vue实例并使用需要的插件

我们主要是在src下进行开发，所有这些文件名不是必须，你可以根据您的项目需求去增加，或删除。不过 app.vue 文件和 main.js 文件必须要有的。

2.3.2、index.html中的部分内容

<body>
    <!-- 定义的Vue实例将挂载在#app节点下 --> 
    <div id="app">

    </div> 
</body>

可以看到在body体中有一个div标签，其id为app,这个id将会连接到src/main.js内容，接着我们看一下main.js中的主要的代码。

import Vue from 'vue'// 引入vue文件 
        import App from './App'// 引入同目录下的App.vue模块 
        //建信息是否显示 
        Vue.config.productionTip = false 
        /* eslint-disable no-new */ 
        new Vue({ el: '#app',//定义作用范围就是index.html里的id为app的范围内 
        components: { App },//注册引入的组件App.vue 
        template: '<App/>'//给Vue实例初始一个App组件作为template 相当于默认组件 
        })

可以看到在main.js中，新建了一个vue实例，并使用el：#app链接到index.html中的app，并使用template引入组件。也就是说通过main.js我们关联到App.vue组件，接着，我们继续看一下App.vue组件中的内容。

<template> 
        <div id="app">
            <img src="./assets/logo.png">
            <HelloWorld/>
        </div>
    </template> 
    <script>
        import HelloWorld from './components/HelloWorld' 
        //export default 的用法：相当于提供一个接口给外界，让其他文件通过 import 来引入使用。 
        export default { 
            name: 'App', 
            components: {
                 HelloWorld
                 }
        }
    </script>
    <style> 
    #app { 
        font-family: 'Avenir', Helvetica, Arial, sans-serif; 
        -webkit-font-smoothing: antialiased; 
        -moz-osx-font-smoothing: grayscale; 
        text-align: center; 
        color: #2c3e50;
        margin-top: 60px; 
    }
    </style>

可以看到App.vue中的内容，是一个标准的组件模板的形式。它包含了template、script、style三部分。从template标签我们可以看到，使用img标签加载了vue头像，并且使用了HelloWorld组件。
总结：
通过上述过程，我们可以看到项目加载的过程是index.html>main.js>App.vue>helloworld.vue。这里只是对我们运行项目后，如何出现首页面做了简单的解释，对具体的实现没有进行分析。

3、vue脚手架3.X+版本介绍

由于之前我们安装了2.x版本的脚手架，现在我们需要安装3.x版本的脚手架。因为Vue-cli 3.x和vue-cli 2.x使用了相同的 vue 命令，所以 vue-cli 2.x 被覆盖了。如果你仍然需要使用旧版本的vue init 功能，那么可以全局安装一个桥接工具。
桥接工具安装：

#使用npm安装桥接工具 
npm install -g @vue/cli-init 
#使用淘宝镜像安装桥接工具 
cnpm install -g @vue/cli-init

npm如果有问题的话可以使用cnpm进行安装,二者选其一即可
如果没有安装旧版本的 vue-cli 2.x 可以跳过桥接直接安装vue-cli 3.x 及以上。

3.1、安装vue-cli 3.x+

#使用npm安装 
npm install -g @vue/cli 
#使用cnpm安装 
npm install -g @vue/cli

3.x及以上安装都是使用上面的指令，npm和cnpm选择一个来安装就好。测试是否安装成功，在命令窗口输入vue -V查看vue脚手架版本号就是安装成功。如下图所示：
在这里插入图片描述

3.2、创建项目

创建项目需要注意：项目名不能有中文，不支持驼峰(含有大写字母)。

#vue create 项目名 
vue create vue-cli3

运行创建项目命令后弹出来的：
在这里插入图片描述
default 是使用默认配置，默认安装及自动配置babel，eslint
如果选择默认选项 default，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex）
注意：上面两个 default 一个是vue2，一个是vue3（我们现在学的是vue2,所以选择vue2即可）
Manually select features 是自定义配置，需要我们手动配置，也可以自己选择需要配置的
这里我选择手动配置（Manually select features）
通过键盘上的 ↓ 方向键选中Manually select features并敲回车，会显示如下配置项
在这里插入图片描述
通过↑ ↓ 箭头选择你要配置的项，按空格是选中，按 a 是全选，按 i 是反选

选择你需要的配置项

选好配置项之后按回车键

选择css 预处理器

选择如何存放位置

是否保存当前配置

静待Vue安装这些项目环境
在这里插入图片描述
项目启动
1. cd 项目名进入到工程目录
2. npm run serve 启动项目

3. 打开浏览器输入网址

4、vue-cli3与2版本区别

vue-cli3基于webpack4打造，vue-cli2是基于webpack3
vue-cli3的设计原则是"0配置"，移除了配置文件，build和config等
vue-cli3提供 vue ui 的命令，提供了可视化配置
移除了static文件夹，新增了public文件夹，并将index.html移入了public文件夹
创建项目的命令 vue create 项目名
目录结构：
在这里插入图片描述
public 类似 static文件夹，里面的资源会原封不动的打包
src源码文件夹
src #主要用于写原码
.gitignore # 排除目录【比如需要上传到githulb】
.babel # 配置安装包
package.json # 配置安装包
package-lock #锁文件【项目使用的版本】后期别人访问的时候，直接加载锁里面的版本信息；
src下的main.js
这里创建的vue实例没有el属性，而是在实例后面添加了一个$mount(’#app’)方法。
$KaTeX parse error: Expected 'EOF', got '#' at position 8: mount(’#̲app’) ：手动挂载到id为\dots$ mount()方法来挂载
需要注意的是：该方法是直接挂载到入口文件index.html 的 id=app 的dom 元素上的

import Vue from 'vue' //导入构造函数 
import App from './App.vue'//导入根组件App.vue 
//构建信息是否显示 
Vue.config.productionTip = false 
new Vue({ 
//这里的render: h=> h(App)是es6的写法, render: h => h(App)可理解为是渲染App组件 
render: h => h(App), 
// render: h => h(App) 转换过来就是： 
// render:(function(h){ 
// return h(App); 
// }); 
}).$mount('#app')

自定义配置文件
虽然项目创建完了，但无法满足定制化的开发需求，因为有时我们希望项目一启动就自动打开浏
览器页面。这个时候就需要手动创建一个配置文件。
在项目根目录下新建一个 vue.config.js 配置文件，必须为 vue.config.js ，vue-cli3会自动扫描此文件，在此文件中修改配置文件。

//在module.exports中修改配置 
module.exports = { 
devServer: { 
	open: true, // 启动服务后是否打开浏览器 
	} 
}

当然你也可以配置端口号，打包的目录等等

zjh的学习乐园

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录