vue脚手架流程

第一步:安装脚手架

全局安装@vue/cli模块包

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

安装完检查下是否安装成功

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

第二步:创建项目

1.创建项目

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

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

2.选择模板

可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来

3. 选择包管理器

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

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

cd vuecil-demo

yarn serve
# 或 npm run serve

6.只要看到绿色的 - 你就成功了

 7.开心的浏览器中 - 输入上述地址 出现欢迎界面

 

脚手架-目录分析

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

 

脚手架-代码和结构分析

 

脚手架-自定义配置

在src并列处, 新建vue.config.js(重要)

 

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

eslint了解

eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格

开启了eslint代码书写需要非常严谨多余空格或者生命的变量未使用都会报错,平常练习不需要开启,默认是开启的,下面代码告知如何关闭