vue-cli构建vue项目步骤
来源:互联网 发布:软件alias怎么读 编辑:程序博客网 时间:2024/06/04 19:13
前言:vue-cli 是vue官方提供的脚手架工具,优势:成熟的vue项目架构设计、本地测试服务器、集成打包上线方案
环境要求:node 4.0 以上、git
步骤: 1.npm install vue-cli -g 全局安装vue-cli;
2.vue init webpack my_project 初始化vue项目,打包方式为webpack。项目目录结构如下图:
图1
在src文件夹中的main.js中设置路由及初始化页面组件,assets中放图片资源,components中放通用组件
图2
3.npm install 安装依赖,项目中的依赖包在package.json 中记录着,通常提交代码、git clone 代码时都会忽略node_modules,所以要先安装依赖
解决npm install 下载太慢:使用cnpm =》 https://npm.taobao.org/,在命令行执行下面代码,之后就可以像使用npm一样使用cnpm了。
4.npm run dev 启动测试服务器
图4
5.npm run build 生成部署文件,dist文件夹中为打包好的项目文件
图5
PS:awsome vue --vue开源组件库;https://github.com/kythen/vue-project.git -- 一个简单的vue项目
总结:前四个步骤完成后,就可以开始码逻辑代码了,由于采用了webpack的热加载,所以修改了代码后无需刷新,浏览器就自动重新渲染页面了。打包部署时,执行第五步骤。
- vue-cli构建vue项目步骤
- 使用vue-cli构建项目步骤
- 笔记:cli脚手架构建vue项目步骤
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建项目
- vue-cli构建项目
- vue-cli快速构建Vue项目
- 用vue-cli构建vue项目
- Vue.js脚手架vue-cli构建项目
- 利用 vue-cli 构建一个 Vue 项目
- 脚手架vue-cli构建vue项目
- Vue.js脚手架vue-cli构建项目
- vue-cli 快速构建项目
- Mybatis 输出sql信息
- 小白鼠排队
- 算法-->折半查找(快排)
- poj2377 -- Bad Cowtractors(最大生成树)
- iOS编程学习十五
- vue-cli构建vue项目步骤
- 马尔可夫链(Markov Chain)
- 关于web前端发送的包含汉字的信息在后台servlet中乱码问题解决
- imshow与显示图像时的全白问题
- 进程描述和控制
- C++虚函数和纯虚函数
- Tomcat启动时出现 Address already in use: JVM_Bind
- Python使用MySQL
- python enumerate用法总结