1.vue脚手架

vue脚手架: 脚手架是为了保证各施工过程顺利进行而搭设的工作平台

好处

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

下载脚手架

全局安装@vue/cli模块包

yarn global add @vue/cli
# OR
npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c(停止命令)

停止重新来
换一个网继续重来

查看Vue命令版本

vue -V

总结: 如果出现版本号就安装成功, 否则失败

2.创建项目

2.1- 创建项目 vue create vuecli-demo

注意: 项目名字不能带大写字母,中文和特殊符号

vue和create是命令, vuecli-demo是自己的文件夹名
vue create vuecli-demo

2.2- 选择模板

可以上下箭头选择, 回车确定

2.3- 选择包管理工具

2.4- 等待下载脚手架项目, 需要的依赖包

yarn add less less-loader@5.0.0 -D

2.5- 终端切换脚手架项目下, 启动内置的webpack热更新开发服务器

cd vuecil-demo

yarn serve

# 或 npm run serve

2.6- 出现绿色就成功了

在浏览器地址栏输入上面地址就行了

3.脚手架目录说明

 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      – 依赖包列表文件和自定义命令

4.脚手架结构

5.自定义配置

src并列处, 新建vue.config.js

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000 
  }
}

6.脚手架内置代码检查工具eslint

eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格例子: 先在main.js 随便声明个变量, 但是不要使用运行后观察发现, 终端和页面都报错了这样的错误, 证明eslint发现你代码不严谨在vue.config.js中配置后重启服务

解决:

7.脚手架的单vue文件

template里只能有一个根标签
vue文件-独立模块-作用域互不影响
style配合scoped属性, 保证样式只针对当前template内标签生效
vue文件配合webpack, 把他们打包起来插入到index.html

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

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

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style lang="scss" scoped>

</style>

怎么去用vue脚手架创建项目