一、引言

二、项目创建

1、安装node

2、全局安装cnpm

3、全局安装webpack和webpack-cli

4、全局安装vue-cli

5、使用vue-cli创建项目

6、开发运行项目

7、打包发布项目

8、调试工具插件

三、总结

一、引言

首先必须明确vue-cli是什么，就是一个脚手架，为了方便使用创建webpack项目，这个项目包含了已经配置好的vue，vue-cli依赖webpack。

那么webpack是什么，是前端资源模块化管理和打包工具，将所有文件都会当作模块加载，进行整合压缩，处理成浏览器可以直接解析的小而规律的文件。

下图是对webpack一些简单的认识

二、项目创建

1、安装node

因为webpack要用到node中的npm，npm是前端的包管理工具，类似管理java中的jar包。node官网直接下载，最好下新版本。

2、全局安装cnpm

这个是淘宝的镜像，下载js的地方，因为国内网速差所以用这个镜像，如果你网速好可以忽略

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、全局安装webpack和webpack-cli

vue-cli依赖，webpack肯定要装，webpack依赖webpack-cli，所以也要装

cnpm install webpack webpack-cli -g

然后执行

webpack -v

有版本输出说明安装成功

4、全局安装vue-cli

终于进入正题安装vue-cli了

cnpm install -g vue-cli

然后执行

vue -V

有版本输出说明安装成功

5、使用vue-cli创建项目

5.1创建空文件夹，执行

vue init webpack vue-demo

5.2等一会控制台会出现一些配置参数让你选择，基本默认就可以

? Project name vue-demo # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router，路由肯定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm

6、开发运行项目

修改一下配置参数

执行下面的命令，运行程序

npm run dev

实际执行的是package.json中的

直接就能在浏览器中看到界面啦。。。

7、打包发布项目

执行下面的命令，打包程序到dist文件夹，与npm run dev类似，实际运行的命令为上图中的build内容。

npm run build

将dist文件夹里面的内容打包到tomcat或者iis根路径，访问localhost:port即可

这里有时候我们不放到web服务器根路径，访问localhost:port/项目文件夹会访问不到，这个时候我们要修改index.js文件夹中的配置assetsPublicPath，然后就可以了。

8、调试工具插件

chrome中有调试插件，直接安装

三、总结

vue-cli与webpack介绍

vue-cli安装

vue-cli创建项目

Vue-cli搭建vue基础项目相关推荐

vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
使用Vue cli创建Vue项目
使用Vue cli创建Vue项目第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
Vue + Spring Boot 项目实战（二）：使用 CLI 搭建 Vue.js 项目
文章目录一.安装 Vue CLI 二.构建前端项目 2.1.创建一个基于 webpack 模板的项目 2.2. 安装图解 2.3. 项目结构总览 2.4. 运行项目 2.5. 浏览器验证项目Git ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
一、Vue环境搭建及基础用法
一.项目初始化及安装官网:https://cn.vuejs.org/ 1.1安装及运行项目步骤 1.安装vue-cli(-g=-global)npm install -g vue-clicnpm i ...
vuecli启动的服务器位置,webpack – 在vue cli 3生成的项目中启动dev服务器
我使用npm i -g @ vue / cli在我的 Windows系统上全局安装了vue cli 3. 然后我使用vue create vue-project生成了一个项目我通过提示选择了所需的插 ...

Vue-cli搭建vue基础项目

一、引言

二、项目创建

1、安装node

2、全局安装cnpm

3、全局安装webpack和webpack-cli

4、全局安装vue-cli

5、使用vue-cli创建项目

6、开发运行项目

7、打包发布项目

8、调试工具插件

三、总结

Vue-cli搭建vue基础项目相关推荐

最新文章

热门文章