vue-cli简单使用心得

对于大型的项目，需要考虑项目结构，项目构建和部署，热加载，代码单元测试等事情，这个时候我们就需要使用脚手架工具方便开发。

环境：node npm

这里我们使用vue-cli来开发vue项目：

1-安装vue-cli

  npm install -g vue-cli

2-初始化，构建一个webpack的项目

vue init webpack my-project

3-打开项目根目录

cd my-project

4-安装npm

  npm install

5-启动项目

 npm  run dev

构建好后的目录结构如图：

启动的时候，npm run dev 然后在浏览器输入http://localhost:8080

这两讲解两个命令：

vue init <template-name></template-name><project-name>

template-name为模板名字，project-name为要生成的项目名字。

vue list

可以罗列出所有的可以使用的模板。

官方提供了很多模板

随便说几个：

Browserify ,simple,webpack,webpack-simple.............

如果官方模板不能满足：

    vue init username/repo my-project

生成基于自己模板的项目

 vue init ~/fs/path/to-custom-template my-project

vue-cli简单使用心得相关推荐

@vue/cli与rimraf 工具包的使用，打包时 calc 报错处理及vuex使用小示例
@vue/cli 实际使用心得文章目录 @vue/cli 实际使用心得小结 components 组件开发:可以将复杂功能细分成具体的小功能模块简化开发难度,同时也会导致嵌套层数很多的情况:例如最 ...
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vConsole) 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vCons ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue 转为静态html,Vue CLI 3使用：HTML和静态资源（五）
HTML public/index.html 文件是一个会被 html-webpack-plugin 处理的模板.构建中,各种资源路径会被注入解析.可以使用 lodash template 语法插入内 ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
Vue CLI 3.0正式发布！
web前端教程用大白话,来讲编程网友们纷纷点赞,也有网友调侃学不动了! 尤雨溪表示,Vue CLI 3.0 与其他的版本完全不同,它经历了重构,目的是: 1.尽可能减少现代前端工具在配置上的烦恼, ...
Qt工作笔记-WebEngineView调用web站点中的JS脚本（含Vue Cli脚本）
首先是一个例子,网页结构如下: 代码如下: index.html <html> <meta http-equiv="Content-Type" content=& ...
Vue学习笔记（3）（Vue CLI）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili Vue CLI 0. 什么是vue-cli 如果你在开发大型项目, ...
Vue学习笔记(九) Vue CLI
1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,它包括三个独立的部分: CLI:一个全局安装的 npm 包,提供在终端里使用的命令 CLI 服务:一个局部安装在使用了 @v ...

vue-cli简单使用心得

vue-cli简单使用心得相关推荐

最新文章

热门文章