vue-cli搭建简单demo详细步骤之借助webpack搭建

简介: vue-cli搭建简单demo详细步骤之借助webpack搭建

vue-cli的简单demo安装配置步骤:npm安装、vue-cli安装、建项目、启动服务

**1,npm安装**

npm安装与cnpm安装

```javascript

npm install  -g vue-cli


cnpm install  -g vue-cli

```

通过npm安装有点慢(毕竟在外国嘛),可以把镜像改为淘宝的:


```javascript

npm install -gd express --registry=http://registry.npm.taobao.org

```


cnpm一般是指淘宝团队贡献的(除了名字,一个叫npm、一个叫cnpm,其他一模一样),它安装很快



通过cnpm下载需要先安装cnpm:


```javascript

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

```

**2,vue-cli2安装**


```javascript

cnpm install -g vue-cli

```

安装时router、ESL选项选为yes,其余一路选择默认方式


注意安装完成后,查看版本为:vue -V(大写的v)


**3,建项目**

有了npm、vue-cli就可以建vue-cli项目了

手动写vue-cli的项目也很复杂,新手可以借助webpack(相当于vue-cli的一个模板)快速开发


```javascript

vue init webpack test

```

**4,启动服务**

其实就是启动node,node扮演的就是后端的服务

好了,完成了


**将vue-cli项目导入方法:**

首先要有vue-cli、npm

cmd切换到需要导入的项目

npm install  (安装相关的依赖)

npm run dev

目录
相关文章
|
3天前
|
JSON JavaScript 前端开发
IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向
IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向
101 0
|
7月前
|
JavaScript 测试技术 Shell
[笔记]vue从入门到入坟《五》vue-cli构建vue webpack项目
[笔记]vue从入门到入坟《五》vue-cli构建vue webpack项目
|
缓存 JavaScript
第二十章 webpack5项目搭建Vue-Cli(配置优化)
本章介绍vue框架搭配组件库的一些优化配置
239 0
|
前端开发
第十九章 webpack5项目搭建Vue-Cli(合并配置)
本章是介绍如何将vue-cli的开模式和生产模式合并的步骤
141 0
|
JavaScript
第十八章 webpack5项目搭建Vue-Cli(生产环境)
本章采用修改react-cli开发模式的配置,来改造vue-cli的生产环境配置
|
JavaScript 前端开发
第十七章 webpack5项目搭建Vue-Cli(开发模式)
本章介绍配置Vue-cli开发模式的步骤
212 0
第十七章 webpack5项目搭建Vue-Cli(开发模式)
|
前端开发 JavaScript
vue-cli npm run build空白页的两个坑 webpack gzip文件压缩优化打包文件
npm run build 是vue-cli用来打包项目的命令行,本文是关于vue-cli打包的一些常见的坑,会尽量详细的写每个步骤,大家可以一边看着文章,一边打包试试。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 初始化一个项目: 这里初始化一个项目,因为导致打包错误的原因多种多样,避免因为其他设置错误干扰,从头开始打包整体步骤也会更加清晰。 命令行: vue init webpack build1(项目名) //吧啦吧啦进行一波设置 //进入项目文件夹 npm install如果还不清楚如何初始化运行一个项目,可以参考我之前写的一篇文章:传送门。
355 0
vue-cli npm run build空白页的两个坑 webpack gzip文件压缩优化打包文件
|
JavaScript 前端开发
【webpack】从vue-cli 2x 到 3x 迁移与实践
【webpack】从vue-cli 2x 到 3x 迁移与实践
148 0
【webpack】从vue-cli 2x 到 3x 迁移与实践
|
JavaScript 前端开发 测试技术
node、npm、webpack、vue-cli傻傻分不清?
node、npm、webpack、vue-cli傻傻分不清?
156 0
|
JavaScript
vue-cli在webpack环境下怎样生成开发环境模板(适合初学者)
vue-cli在webpack环境下怎样生成开发环境模板(适合初学者)