使用vue-cli脚手架工具创建vue项目

2024-05-25 10:43:37

vue-cli 脚手架安装：

1) 确保node环境：安装vue-cli需要在node环境下安装，所以首先确保自己安装了node，检查自己电脑是否安装了node ,可以在命令行工具内执行： node -v，如下图，如果出现相应的版本号信息，说明安装了node

如果出现类似：xxx不是内部命令，说明电脑没有安装node ,需要在官网下载与你电脑对应的版本的node,进行安装。node的下载地址为：node官网下载地址。

注意：安装vue-cli脚手架需要电脑安装的node的版本在v4.0以上

2)全局安装webpack: 使用npm(npm也是建立在node环境下)全局安装webpack,打开命令行输出： npm install webpack -g，同样的，安装完成后为了确保安装成功，也需要在命令行输入：webpack -v，出现相应的版本才算安装成功，如下图：

注意：从webpack4.0开始，安装webpack时需要安装webpack-cli依赖，所以安装webpack的命令变成：npm install webpack webpack-cli -g

3) 全局安装vue-cli: 在命令行输入: npm install --global vue-cli

等待安装完成后，在命令行输入：vue -V(这里的v是大写)，如下图，出现相应的版本号则是安装成功。

使用vue来构建项目：

这里使用webstorm编辑器来创建项目，首先是创建一个文件夹，右击文件夹-->Open in Terminal进入终端-->输入

npm install -g vue-cli ,给该项目安装脚手架工具，如下图

接着在终端输入：vue init webpack 项目名称(如vue_demo)，自动开始下载vue模板，在过程中可能会要手动的同意安装一些插件之类的，如果不需要就可以直接按enter，等待下载项目依赖等，见下图：

接着按命令行的提示，进入项目目录，输入命令： cd 项目名称（如vue_demo）,进入项目后，输入命令：npm install 进行一些npm依赖等的安装，如下图：

最后运行项目：输入命令 npm run dev 或者npm start,如果出现一些运行信息以及一行网址就是运行成功，见下图：

访问上面的网址即可。

上面的操作创建了一个vue模板项目，项目的目录结构如下图：

分析模板项目的结构：

|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules：项目的依赖文件，如router等
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件

项目的打包与发布：

打包：还是在项目的终端，输入命令：npm run build

发布：使用静态服务器工具包

输入命令：npm install -g server ,安装好服务后，输入server dist 就可以，终端会显示一个网站，就是打包好的项目网址，一网址为：http://localhost:5000

使用vue-cli脚手架工具创建vue项目相关推荐

基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
vue 引入的方法用在template_?【有手就行】轻松打造属于自己的Vue工程化脚手架工具...
前言为什么闲得蛋疼要自己做脚手架官方脚手架工具创建的项目不能马上进行搬砖? 每次创建新项目就得复制粘贴旧项目的配置再CRUD? 能不能自己造个劳资御用的个性化定制版脚手架? 以Vue举例来说,虽然 ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
史上最详细Vue-CLI脚手架快速创建Vue项目教程
Vue-CLI脚手架前言安装Vue CLI 使用参考文档一.创建项目存储文件夹二.CMD打开当前文件夹所在路径三.项目的配置 1.创建项目存储位置 2.项目名命名 3.项目预设 4.项目功能 ...
vue CLI脚手架搭项目
1.安装 node.js环境官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到安装完成后cmd打开终端,输入node -v ,npm - ...
1. Vue CLI脚手架
1.1 介绍 Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板,是Vue官方提供的标准化开发工 ...
前端框架vue04~~vue.cli脚手架的基本使用
文章目录 [1. Vue-CLI脚手架](https://cli.vuejs.org/zh/guide/) [2. 安装](https://cli.vuejs.org/zh/guide/install ...
Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口命令 ...

最新文章

热门文章