Vue学习笔记-第五弹

知识浅谈
73 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

🍁 作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云专家博主

📌 擅长领域：全栈工程师、爬虫、ACM算法

💒 公众号：知识浅谈

🔥 联系方式vx：zsqtcc

每次学到知识茅塞顿开都抑制不住自己想要去分享的冲动，说来就来...

15. Vue CLI脚手架

15.1 什么是CLI

CLI (command-line interface) 就是命令行界面

15.2什么是Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,是一个前端的完整的项目。

15.3VueCLI的优势

  • 通过vue-vli 搭建交互式的项目脚手架， 像是bootstrp css js jQuery js 通过执行命令方式下载相关依赖。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。vue脚手架中已经包含了 vue 和vuerouter
  • 一个运行时依赖 (@vue/cli-service)，该依赖：
    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置； 类似于后端的jar或者是war的打包方式。只不过webpack是基于前端的打包方式。通过打包就可以快速拿到编译好的i昂木源码，然后部署到服务器上。
    • 可以通过项目内的配置文件进行配置； 通过修改默认的配置文件达到自己想要的项目环境。
    • 可以通过插件进行扩展。v-char 和 ElementUI
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。服务器使用的是Node.js, 通过使用 Vue 和 VueORouter 然后可以通过 webpack或者是yarn的打包方式。

15.4 VueCLI的安装

  1. 环境准备

    # 下载nodejs
windows系统:  .msi  安装包（exe）指定安装位置   .zip（压缩包）直接解压到指定目录
mac os系统： .pkg  安装包格式自动配置环境变量    .tar.gz（压缩包）解压说安装到指定目录

# 配置nodejs环境变量
windows系统：
1.计算机右键属性--> 高级属性  -->环境变量 添加如下配置
NODE_HOME = node.js安装目录
Path 中  加上一个  %NODE_HOME
mac os系统
推荐是用.pkg安装就直接配置node环境了
# 验证是否安装成功
命令行 或 cmd 中 输入  node -v 看是否输出版本信息
# npm介绍
node package manager   (nodejs的包管理工具)


maven 管理后端的依赖   远程仓库(中心厂库)  阿里云仓库
npm   管理前端的依赖   远程仓库(中心厂库)  淘宝镜像
# 配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
使用命令验证: npm config get registry
# 配置本地缓存和仓库
1. 因为当从远程下载依赖的时候，会先存储到本地缓存中，之后再存储到本地仓库中。
windows:
C:\Users\Layne\Desktop>npm config set cache "E:\npmRepository\npm-cache"

C:\Users\Layne\Desktop>npm config set prefix "E:\npmRepository\npm-global"

mac os:
npm config set cache "/users/npmRepository/npm-cache"
npm config set prefix "/users/npmRepository/npm-global"
# 验证安装的配置
npm config ls 查看配置情况

  2. 安装脚手架

    # 0.卸载3.x版本脚手架 (因为跟项目的版本，所以卸载3版本)
npm uninstall @vue/cli

# 1.Vue Cli官方网站
https://cli.vuejs.org/zh/guide/

# 2.安装2版本vue脚手架
npm install -g vue-cli    //-g 代表的全局安装

  3. 第一个vue脚手架的项目

    # 1.创建vue脚手架的第一个项目
vue init webpack my-project   //webpack指的是前端代码打包方式 最后一个是项目名
# 2.创建第一个项目
创建的时候会有选项，对于从eslint开始都选
	hello    -------->项目名 
        -build -------->用来使用webpack打包使用的build依赖
        -config ------->用来做整个项目配置的目录
        -node_modules ---->用来管理项目中使用的依赖
        -src ------------->用来书写vue的源代码[重点]
            assets    ---->用来存放静态资源[重点]
            components---->用来书写Vue组件[重点]
            router	------>用来配置项目中的路由
            App.vue	------>项目中根组件[重点]
            main.js ------->项目中主入口[重点]
        -static	---------->其它静态
        .babelrc ---------->将es6语法转为es5运行
        .editorconfig------>项目编辑配置
        .gitignore--------->git版本控制忽略的文件
        -.postcssrc.js----->源码相关文件
        -index.html-------->项目主页
        -papackage.json ----->类似与项目中的pom文件 依赖管理 jquery 不建议手动修改
        -package-lock.json->对papackage.json加锁文件
        -README.md -------->项目阅读文件
# 3.如何运行在项目根目录中执行
npm start 运行前端系统  //前提是在项目的根目录下

# 4.如何访问项目
http://localhost:8080

# 5.vue Cli中项目开发方式
注意：一切皆组件   一个组件中 js代码  html代码，css样式
1. VueCli开发方式是在项目中开发一个一个组件对应的一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统
2. 在使用vue cli进行开发时不再书写html，编写的是一个组件*.vue文件，日后打包时vue vli会将组件编译成运行的html文件

    4.开发vue脚手架

avatar
文章
阅读
粉丝