Vue 学习14——CLI简介(如何新建一个vue项目)

目录

㋀㋊

✎ VUE-CLI简介

◆ 前言

◆ 脚手架信息

➀ vue-cli

➁ vue-cli 脚手架地址

✎ 初始化项目

◆ 前言

◆ 步骤

➊ 全局安装 vue-cli 和创建 my-projetc

➋ 创建 my-project 的相关参数

➌ 全程命令结果动图GIF演示(刚安装完无法启动,因为无依赖)

❹ npm install(node_modules依赖安装)

❺ 访问结果(npm run dev)

◆ VUE项目结构

☑ 创建项目参考文章

 


✎ 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项目结构

我们所写的位置在如图所示

  • ☑ 创建项目参考文章

https://www.cnblogs.com/xiechuanghong/p/9758533.html

发布了217 篇原创文章 · 获赞 49 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/Sicily_winner/article/details/103935694