vue-cli起项目步骤

小咪咪 2021-11-26 20:46 384阅读 0赞

**1.全局安装 vue-cli**

**老版本：npm install -g vue-cli (npm uninstall vue-cli -g 卸载)**

**新版本：****`npm install -g @vue/cli`**

安装淘宝cnpm镜像

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

**2.创建一个基于webpack模板的新项目**

**老版本：vue init webpack my-blog**

**新版本：vue create ele-app**

**3.一路No**

**4.cd my-blog**

**5.npm run dev(npm run serve)**

安装axios

**npm install --save axios**

安装vuex

**npm install vuex --save**

安装路由

**npm install vue-router --save**

安装better-scroll（移动端滚动）

**npm install better-scroll --save / cnpm i -S better-scroll**

安装element-UI

**npm i element-ui -S**

安装mint-UI

**npm install mint-ui -S**

**一、 安装 node.js**

**安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。**

**二、安装webpack**

npm install webpack -g

安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。

**三、安装 vue-cli**

npm install -g vue-cli

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

如果提示“无法识别 'vue' ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

**四、使用vue-cli来构建项目**

**　　1、在硬盘中找一个放项目的文件夹**

**　　2、在文件夹下打开命令盘，输入命令**

Vue-Project是我们自己设置的项目名称，项目名称不能用中文

vue init webpack Vue-Project

![1453885-20180810115359643-816192686.png][]

**　　3、进入项目工程目录**

**　　4、安装项目所需依赖 npm install**

**　　5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource**

npm install vue-router vue-resource --save

创建完成的项目目录，如下图

![1453885-20180810115624848-1671122042.png][]

各个目录的作用

![1453885-20180810115649579-286359444.png][]

**最后一步启动项目**

npm run dev

![1453885-20180810115821251-315177806.png][]

启动成功，打开浏览器8080窗口，页面如图所示

![1453885-20180810115907639-1087486712.png][]

转载于:https://www.cnblogs.com/andyZhang0511/p/10935259.html

[1453885-20180810115359643-816192686.png]: /images/20211126/5bcfc973ddf848759253ef9cb1c55d2b.png
[1453885-20180810115624848-1671122042.png]: /images/20211126/94f5b0437fa84173af1ba6798b322166.png
[1453885-20180810115649579-286359444.png]: /images/20211126/f123ef6a975d44b4bdfd00068540483a.png
[1453885-20180810115821251-315177806.png]: /images/20211126/eb2dc544df664fc483025332873ce059.png
[1453885-20180810115907639-1087486712.png]: /images/20211126/2c1a8c6f85fa4d57ba1f44ae4ec3e9ed.png

发表评论取消回复

表情：

评论列表（有 0 条评论，384人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot项目@Email不起作用

SpringBoot项目@Email不起作用新版本springboot要加上 <dependency> <groupId>org

阳光穿透心脏的1/2处/ 2023年10月04日 08:52/ 0 赞/ 66 阅读

相关 VueCli3项目解决打包问题

背景描述：自己之前做了一个vue的小案例，但是从来没有用过npm run build,果真遇到了挺多令人头疼的问题！然后在这里和大家分享一下！项目技术：VueCli3脚手

ゞ浴缸里的玫瑰/ 2023年09月26日 10:01/ 0 赞/ 96 阅读

相关 vueCli pwa模式增加

vue-cli2X或者vue-cli3X 文档见[官网][Link 1] 我们不用配置就可以跑起来，但是配置里面有些地方需要注意的而且不能乱改，自行看文档。配置常用的是

港控/mmm°/ 2023年07月18日 14:16/ 0 赞/ 174 阅读

相关 vuecli项目怎样使用jsx

有时候用jsx写页面可能更灵活，当然在vue中写jsx需要插件的支持我用了一些官方给出的，感觉不怎么好用，推荐安装这个安装babel-plugin-trans

柔情只为你懂/ 2023年06月16日 10:42/ 0 赞/ 25 阅读

相关 vuecli脚手架目录介绍

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2023年01月23日 09:59/ 0 赞/ 19 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 333 阅读

相关使用VueCLI脚手架创建项目

\\VueCLI脚手架创建项目安装脚手架 \[VueCLI官网\] (https://cli.vuejs.org/zh/guide/installatio

素颜马尾好姑娘i/ 2022年11月21日 09:58/ 0 赞/ 411 阅读

相关 ionic 创建项目步骤

你的ionic项目就已经构建成功了! 下面是一些技巧: \-通过cd命令进入你的项目:$ cd Ionic\_1stTutorial \-设置项目使用Sass:ionic

古城微笑少年丶/ 2022年07月08日 18:24/ 0 赞/ 266 阅读

相关微信里调起微信支付步骤

微信JS-SDK使用步骤： 1.引入文件：<script type="text/javascript" src="http://res.wx.qq.com/open/

╰+哭是因爲堅強的太久メ/ 2022年02月23日 11:18/ 0 赞/ 418 阅读

相关 vue-cli起项目步骤

1.全局安装 vue-cli 老版本：npm install -g vue-cli (npm uninstall vue-cli -g 卸载) 新版本：`npm insta

小咪咪/ 2021年11月26日 20:46/ 0 赞/ 385 阅读