vue初步学习之@vue/cli脚手架的安装配置

什么是vue

vue.js是一套构建用户界面的(ui)的渐进式javascript框架

渐进式:从声明渲染->组装系统->客户端路由->集中式状态的管理->项目构建

优点:1.易用,有基础可以快速上手

        2.灵活,在库和框架之间灵活伸缩自如

        3.高效:20kb虚拟大小

库:方法和集合

框架:有一套拥有自己规则的语法,功能比库更强大

vue特点: 1.采用组件化模式,提高复用率,便于维护

                2.声明式编码,提高开发效率

                3.使用虚拟DOM+优秀的Diff算法

@vue/cli脚手架

webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目(可以理解为自动生成一套框架)

@vue/cli的好处: 开箱即用

@vue/cli的安装:

1.全局安装@vue/cli

yarn add @vue/cli -g     //如果没有安装yarn包  可以使用npm install @vue/cli -g

2.查看是否安装成功

vue -V    或者  vue --version      //当出现安装版本号的时候就安装成功,否则失败

创建项目并启动服务

1.在你想创建项目的文件夹下面打开dos命令行

vue create  vue-demo       //vue-demo 是项目名,项目名不能带大写字母, 中文和特殊符号

//...选择模板,选择下载方式,生成项目文件夹....

2.启动服务

yarn serve

@vue/cli目录分析

vue-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自定义文件配置

1.需要自己手动在src同级文件夹下创建vue.config.js文件(替代webpack.config.js文件)

2.配置端口号

//在vue.config.js中进行配置
module.exports = {
    devServer: {
        port: 3000,   //修改端口号
        open: true //浏览器自动打开
    },
    lintOnSave: false,   //关闭检查代码报错的工具
}

 当出现以上错误的时候:  6:5   表示  第6行,第5列