目录
㋀㋊
➌ 全程命令结果动图GIF演示(刚安装完无法启动,因为无依赖)
❹ npm install(node_modules依赖安装)
✎ VUE-CLI简介
◆ 前言
我们前一个阶段有关VUE入门的相关基础知识已经讲解完了。
然后从本节开始,我们来介绍一些VUE他比较贴近实际应用的知识内容,那这节课首先要讲解的一个VUE CLI。
它的概念相当于我们在修建建筑的时候,会有一个初始的一个架子,然后在这个基础上来进行实际的项目的建设,更便于我们进行工程的搭建,VUE CLI也差不多提供工程架构,我们可以直接在它的基础上来实现我们的项目就可以了。
◆ 脚手架信息
➀ vue-cli
方便进行工程搭建的一个架子,它里面会用到我们之前讲解到的很多vue的基础语法。
➁ vue-cli 脚手架地址
https://www.npmjs.com/package/vue-cli --注意:此包已被启用
https://www.npmjs.com/package/@vue/cli --2020年现在可使用的<以后不知道会不会弃用>
$ npm install -g vue-cli
$ vue init <template-name> <project-name>
Example:
$ vue init webpack my-project
✎ 初始化项目
◆ 前言
进入npm搜索界面发现这个vue-cli已经被弃用,当前2020年使用的@vue-cli还在使用,谁知道以后2020年@vue-cli会不会弃用,所以创建项目以vue-cli为例,但是弃用不影响创建vue项目和使用!
重点哈!!重点哈!!重点哈!!
执行完下面的gif动图命令,输入启动vue命令npm run dev是执行不了的,因为你的node_modules没有相关依赖,所以你要进入app-myproject执行一下npm install,依赖包有了之后才能启动成功!!!
◆ 步骤
➊ 全局安装 vue-cli 和创建 my-projetc
npm install -g vue-cli vue init webpack my-project
➋ 创建 my-project 的相关参数
➌ 全程命令结果动图GIF演示(刚安装完无法启动,因为无依赖)
❹ npm install(node_modules依赖安装)
> cd my-myproject
> npm install
❺ 访问结果(npm run dev)
浏览器输入:http://localhost:8080/#/
◆ VUE项目结构
我们所写的位置在如图所示
-
☑ 创建项目参考文章