VUE脚手架具体使用方法
什么是vue脚手架？
他是一个快速构建 vue 项目的工具，通过他，我们可以将 vue 所需要的文件安装完成。
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，
相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。
安装 vue-cli 脚手架
安装脚手架需要用 cnpm( 淘宝镜像 ) 安装 , 直接用 pip 安装 会失败 , 安装 cnpm 命令如下 :
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装成功输入 :cnpm-V, 查看 cnpm 是否安装成功 ,
注意 V 一定要是大写 .
安装 vue 脚手架命令去下 :
cnpm install -g vue-cli 安装成功是下面这样的
然后使用 vue-V 查看是否安装成功.
如果安装失败可能是 cnpm 版本过低 , 更新 cnpm 的版本即可 .
cnpm 更新必须要手动更新,更新命令如下:
npm install -g npm
使用 vue init webpack myitem 这条命令，就可以创建一个 vue
的脚手架。
解释一下命令 :
vue init 即使用vue-cli初始化一个项目。
webpack 是说使用webpack作为构建工具。
firstvue 是项目名称。 注意： 项目名称推荐使用小写字母。
安装时会暂停一下 , 你点击 Enter 进行下一步就可以了 ,
Install vue-router? 是否安装 vue 的路由 ? 如果你要做前后端的项目的话 , 就要选择 yes, 建议选择 yes.
Pick an unit tester jest 是否单元测试
其他的更具自己的需求进行选择
安装成功会显示出这两个命令 :
这个时候进入你新建的 vue 项目的目录下 , 你会发现他新建了一个 mytime 的文件夹
在运行项目前 , 需要安装依赖 , 命令如下:
cnpm install
Vue 需要在黑窗口启动一下 .
启动之前进入 vue 的项目根目录下 . 输入命令 :
cd mytime 进入根目录
npm run dev 启动项目
启动成功效果如下 :
复制路由 : http://localhost:8081 , 在谷歌浏览器打开 , 会显示页面 :
这个时候 , 一个完整的 vue 脚手架成功搭建成功 .
把你新建的 vue 项目拖拽到你的编程软件的根目录下 :
会出现这些文件 , 这个时候 , 你就可以进行编辑了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue3 Element-plus el-menu无限级菜单组件封装过程
对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装，这篇文章主要介绍了Vue3 Element-plus el-menu无限级菜单组件封装,需要的朋友可以参考下2023-04-04
SyntaxError: /xx.vue: Unexpected token, expected “,“错误解
这篇文章主要为大家介绍了SyntaxError: /xx.vue: Unexpected token, expected “,“错误解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-08-08
下面小编就为大家分享一篇vue-cli创建的项目,配置多页面的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue项目启动后,js-base64依赖报错Cannot read properties
这篇文章主要介绍了vue项目启动后,js-base64依赖报错Cannot read properties of null(reading ‘replace’)问题,2024-05-05
开发中会有要获取当前日期的需求,有的是获取到当前月份,本文就介绍了vue获取当前日期时间(moment、new Date()),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2023-08-08
这篇文章主要介绍了Vue.js组件高级特性,结合实例形式详细分析了vue.js组件递归、模板、动态加载、渲染等相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了vue项目打包之开发环境和部署环境的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
vue中使用axios post上传头像/图片并实时显示到页面的方法
今天小编就为大家分享一篇vue中使用axios post上传头像/图片并实时显示到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue ECharts设置主题，本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
Vue.js框架是什么，为什么要选择它？这篇文章为大家介绍目前前端技术使用的趋势，以及Vue.js的优点和适用场景等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论