关于vue的学习（二）

1.1.@vue/cli安装

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

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

1.创建项目

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

vue create vuecli-demo

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

2.选择模板

Default【VUE2】

use Yarn

3.回车等待生成项目文件夹+文件+下载必须的第三方包们

4.进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demo

npm run serve

或 yarn serve

5.输入得到的网址

1.3@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 – 依赖包列表文件

1.4@vue/cli 项目架构了解

1.5目标: 知道项目入口, 以及代码执行顺序和引入关系

1.5@vue/cli 自定义配置

src并列处新建vue.config.js

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

1.6eslint了解

这是一个类似于严格模式，有着自己的规则，建议暂时关闭

暂时关闭eslint检查

module.exports = {
         。。。。

        lintOnSave:false
}

 

1.7@vue/cli 单vue文件讲解

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

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

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

最终: Vue文件配合webpack, 把他们打包起来插入到index.html, 然后在浏览器运行