[JavaScript知识库]vue/cli 脚手架

@vue/cli 脚手架概念

@vue/cli 脚手架 是vue 官方提供的一个全局模块包(得到vue命令)此包用于创建脚手架项目

@vue/cli 脚手架 ?的好处

0配置 webpack
babel支持
css, less 支持
开发服务器支持

?

@vue/cli 的使用

@vue/cli 安装

?yarn global add @vue/cli
或者
npm install -g @vue/cli

?查看 vue 脚手架 版本

?vue -V

?@vue/cli 创建项目启动服务

创建项目

vue create 项目名
vue create vuecli-demo ? ? //注意 : 项目名不能带大写字母, 中文 与 特殊符号?

启动服务器

?yarn verse ? 或者 ?npm run serve

?

@vue/cli 目录和代码分析

??vuecil-demo ? ? ? ?# 项目目录
? ? ├── node_modules # 项目依赖的第三方包
? ? ├── public ? ? ? # 静态文件目录
? ? ? ├── favicon.ico# 浏览器小图标
? ? ? └── index.html # 单页面的html文件(网页浏览的是它)
? ? ├── src ? ? ? ? ?# 业务文件夹
? ? ? ├── assets ? ? # 静态资源
? ? ? ? └── logo.png # vue的logo图片
? ? ? ├── components # 组件目录
? ? ? ? └── HelloWorld.vue # 欢迎页面vue代码文件?
? ? ? ├── App.vue ? ?# 整个应用的根组件
? ? ? └── main.js ? ?# 入口js文件
? ? ├── .gitignore ? # git提交忽略配置
? ? ├── babel.config.js ?# babel配置
? ? ├── package.json ?# 依赖包列表
? ? ├── README.md ? ?# 项目说明
?? ?└── yarn.lock ? ?# 项目包版本锁定和缓存地址

?主要文件及含义

node_modules? ? ? ? ?——?下载的第三方包
public/index.html? ? ? ——?浏览器运行的网页
src/main.js? ? ? ? ? ? ? ?——?webpack打包的入口文件
src/App.vue? ? ? ? ? ? ——vue项目入口页面
package.json? ? ? ? ? ——?依赖包列表文件?

?@vue/cli 自定义配置

?在与src并列处新建vue.config.js

moudle.exports = {
? ? devServer: {//自定义服务配置
? ? ? ? open: true, //自动打开浏览器
? ? ? ? port: 3000 ?//更改端口号为 3000
? ? }
}

?eslint 代码检查工具

在module.exports = {

//...其他配置

lintOnSave: false? ? ? //关闭eslint 检查

}

?@vue/cli 单vue文件讲解

单vue文件好处 , 独立作用域互不影响

vue文件配合webpack , 将他们打包起来插入到index.html, 然后再浏览器运行

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped,style配合scoped属性,保证样式只针对当前页面(template内标签)有效 -->
<style scoped>
</style>