搭建Vue脚手架(vue-cli)并创建一个项目
程序员文章站
2022-04-24 09:44:00
...
1、 安装nodejs环境
官网下载:https://nodejs.org/en/download/
一直默认就行,路径可以改变但要记得到
安装完成后cmd,输入
node -v
npm -v
如果能看到node和npm的版本号了,说明已经安装成功
2、安装vue-cli
有npm和cnpm两种方式,网上都说cnpm好些,所以我也用的cnpm安装,
首先利用淘宝镜像安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装完成,输入
cnpm -v
然后全局安装 vue-cli
cnpm install -g vue-cli
-
这个命令只需要运行一次就可以了。安装上之后,以后就不用安装了。
查看vue版本号
如果提示“无法识别 ‘vue’ ” ,有可能是 npm 版本过低,需要手动更新npm的版本号,这也是上面说的为什么要保证npm版本号高的原因,npm的版本可以手动升级更新
npm install -g npm
3、使用vue-cli来创建一个基于 webpack 模板的新项目
创建
cmd利用cd指令进入到保存项目的文件夹下,然后输入命令
vue init webpack
安装项目所需要的依赖
进入新建的项目文件夹下,就是上头有一些文件的里面,输入命令
cnpm install
因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。
运行项目
出现如图画面,在浏览器中输入网址http://localhost:8080 会出现如下图
文章参考:https://blog.csdn.net/inthuixiang/article/details/82225407
上一篇: typecho怎么调用图片显示数量?
下一篇: php读取xml的类
推荐阅读
-
使用vue脚手架(vue-cli)搭建一个项目详解
-
用Eclipse搭建Android开发环境并创建第一个Android项目(eclipse+android sdk)
-
使用vue-cli脚手架工具搭建vue-webpack项目
-
用npm安装vue和vue-cli,并使用webpack创建项目的方法
-
vue-cli脚手架搭建的项目去除eslint验证的方法
-
使用vue-cli(vue脚手架)快速搭建项目的方法
-
用Eclipse搭建Android开发环境并创建第一个Android项目(eclipse+android sdk)
-
Vue-cli脚手架搭建移动端响应式项目及nodejs服务端搭建教程
-
从零开始搭建一个规范的vue-cli 3.0项目
-
图文讲解用vue-cli脚手架创建vue项目步骤