【vuejs小项目】一、脚手架搭建工作
一、关于vuejs
这是一个MVVM的前端开发框架,model(数据)、viewmode(通讯)、view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则。
我们都知道一个普通常见的页面,他会由header,body,footer,组成,里面再细分还有nav,list,slidebar等等,组件化就是将这些会重复用到的代码封装起来,在一个页面中需要用到的时候进行引入。
二、搭建脚手架(初始化项目)
做一个项目开始将一些文件环境搭建好,这里vue提供了vue-cli作为项目搭建工具,在nodejs环境下进行安装,nodejs版本在4.0以上
以下是在window环境下的安装步骤
1.node -v 查询版本
2.npm install -g vue-cli 安装vue-cli
3.vue 查看是否安装成功
4.vue list 查看可用模板
5.vue init webpack project-name 选择一个模板(webpack)初始化,注意这里进入到需要项目所在目录,然后根据提示填写作者等内容
6.cd project-name 进入项目文件夹
7.npm insatll 安装依赖,这里是因为在init后文件根目录下有一个package.json文件,这个文件中包含了所需要的包,可以自动安装。在没有这个文件的时候我们需要先init 然后安装所需要的包,package.json会显示安装成功后的包的版本信息
8.npm run dev 启动项目,端口号是8080
【vuejs小项目】一、脚手架搭建工作的更多相关文章
- 【vuejs小项目——vuejs2.0版本】单页面搭建
http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...
- 【vuejs小项目——vuejs2.0版本】组件化的开发方式
对于多张页面需要里存在相同模块,可以进行组建化的开发模式. 例如:此处需要一个评分标准组件,创建一个components/star/star.vue. 在需要引入该组建的页面上 import进去< ...
- 在windows下用脚手架搭建vue环境
做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...
- 小tips:使用vue-cli脚手架搭建项目,关于eslint语法检测配置
配置文件在项目根目录里,文件名以 .eslintrc.* 为名. 为了兼容以前写的代码,避免修改太多代码,把不符合自己习惯的规则去掉,简单配置代码: module.exports = { root: ...
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...
- 使用 vue-cli(脚手架)搭建项目
一.使用 vue-cli(脚手架)搭建项目 1) Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具 2) 在线文档:https://github.c ...
- vue-cli3.0 脚手架搭建项目的过程详解
1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
随机推荐
- D2js 是如何处理并发的
d2js 运行于 servlet 容器,如tomcat,由于容器自身支持并发,似乎 d2js 只要使用 nashorn 运行脚本即可.这样我们得到最简单的实现方式: 在该方式中,nashorn引擎仅存 ...
- .net MVC中异常日志
在日常工作中,我们有些项目可能进入了维护期,但是项目可能存在一些潜伏较深的bug导致我们在测试阶段并未发现,那么错误日志记录为我们的项目维护起着重要的作用.记录系统日志的方法如下 1.在系统根目录建立 ...
- spring 上传 下載文件
1,spring配置文件添加文件上传配置 <!-- 上传文件 --> <bean id="multipartResolver" class="org.s ...
- 11个审查Linux是否被入侵的方法
11个审查Linux是否被入侵的方法 一.检查系统日志 lastb命令 检查系统错误登陆日志,统计IP重试次数 二.检查系统用户 1.cat /etc/passwd 查看是否有异常的系统用户 2.gr ...
- client offset screen 的区别
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...
- python基础八
面向对象的好处 更容易扩展.提高代码使用效率,使你的代码组织性更强, 更清晰,更适合复杂项目的开发 封装 把功能的实现细节封装起来,只暴露调用接口 继承 多态 接口的继承 定义 类 ===> ...
- python之路十九
1.Django请求生命周期 -> URL对应关系(匹配) -> 视图函数 -> 返回用户字符串 -> URL对应关系(匹配) -> 视图函数 ...
- 《PHP字符串函数》笔记
① str_repeat() 重复一个字符串; ② str_shuffle() 随机打乱一个字符串; ③ strftime() 根据区域设置格式化本地时间/日期; ④ strip_tags() 从字符 ...
- PDF虚拟打印机
1.安装福昕PDF阅读器,自己就会安装上PDF虚拟打印机 2.通过office2010之后版本中自带的另存为功能转换为pdf 3.pdf虚拟打印机工具:工具1:http://www.win2pdf.c ...
- ssdb binlog机制 存疑
int BinlogQueue::del_range(uint64_t start, uint64_t end){ while(start <= end){ leveldb::WriteBatc ...