一.环境搭建

1.安装node

  • 官网下载node安装包
  • 傻瓜式安装
  • 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\nodejs)
  • 可以通过node提供的npm包管理器安装vue脚手架
  • 通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org)

2.安装全局vue脚手架

  • 起管理员终端(mac: sudo)
  • cnpm install -g @vue/cli
  • 如果安装失败,检测网络,请npm缓存(npm cache clean --force)后重新安装

3.创建项目

  • 采用可视化方式创建(vue ui)
  • 命令行
1.打开终端
2.去向目标目录(将项目创建在该目录)(cd 目标目录)
3.指令创建项目(vue creat 项目名)
4.选择自定义:Manually select features
5.用空格选取所需插件:Router, Vuex
6.采用Router的history...
7.在目标目录创建一个项目名的文件夹,该文件夹就是所创的项目

4.启动项目

1.进入项目目录
2.启动服务器(npm run serve)
3.退出服务器|刷新服务器(ctrl+c)
4.项目完成后,在项目目标下可以进行项目打包发布,要提前做配置(npm run build)

5.项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:资源
-- components:组件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)

6.项目开发

  • vue.config.js
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,选做
  • main.js
// 不用修改
// 采用之前的语法创建根实例
new Vue({
el: "#app",
router: router,
store: store,
render: function (h) {
return h(App)
}
})
  • *.vue
<template>
<!-- 模板区域 -->
</template>
<script>
// 逻辑代码区域
// 该语法和script绑定出现
export default { }
</script>
<style scoped>
/* 样式区域 */
/* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

day63的更多相关文章

  1. day6-3面向对象高阶

    面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对象),实 ...

  2. day63 django-模板语言

    我们的功能是需要解耦的,从开始就一直在强调这一点,所以我们的函数需要另外放到一个单独的文件里面,一般都是放到views文件里面,views叫做视图,一般术语叫做视图函数,用来进行各种逻辑判断的,需要一 ...

  3. python 全栈开发,Day63(子查询,MySQl创建用户和授权,可视化工具Navicat的使用,pymysql模块的使用)

    昨日内容回顾 外键的变种三种关系: 多对一: 左表的多 对右表一 成立 左边的一 对右表多 不成立 foreign key(从表的id) refreences 主表的(id) 多对多 建立第三张表(f ...

  4. js制造运动的假象-------Day63

    这里用的这个名称可能不合适,只是临时我也没有想起比較相应的名字来,那就这样先写吧. 首先,我先表达下我想实现的是什么效果: 想必大家都玩过,至少见过非常多小游戏,例如说超级玛丽.例如说flappy b ...

  5. day63—JavaScript浏览器对象cookie

    转行学开发,代码100天——2018-05-18 今天的主要学内容时JavaScript中浏览器对象——cookie. cookie用于存储web页面的用户信息,其存储容量很小,一般几k左右.如常见的 ...

  6. day63 django入门(4)

    目录 一.CBV源码解析 二.模版语法 1 传值 2 过滤器(最多只能传两个参数) 3 标签 4 自定义过滤器,标签,inclusion_tag 4.1 自定义过滤器 4.2 自定义标签(可以传多个参 ...

  7. day63:Linux:nginx基础知识&nginx基础模块

    目录 1.nginx基础知识 1.1 什么是nginx 1.2 nginx应用场景 1.3 nginx组成结构 1.4 nginx安装部署 1.5 nginx目录结构 1.6 nginx配置文件 1. ...

  8. day63 Pyhton 框架Django 06

    内容回顾 1.装饰器 装饰器:是一个闭包函数,在不改变原函数的代码和调用方式的基础上,给原函数增加功能. def wrapper(func): def inner(*args,**kwargs): # ...

  9. 初识Djiango

    老师的博客:点我 内容主要是看老师的博客 下面是自己的写的某些自己当时不太懂的. 关于Django的版本的问题 Django官网下载页面 在官网上显示lts的是表示支持长期版本.所以最好下载1.11版 ...

随机推荐

  1. JS--我发现,原来你是这样的JS(四)(看看变量,作用域,垃圾回收机制是啥)

    一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第四篇,是红宝书第四章内容(主要是变量和作用域问题),当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的 ...

  2. Echarts图表常用功能配置,Demo示例

    先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...

  3. SD从零开始45-46

    [原创] SD从零开始45 运输流程的控制 运输业务场景的例子Examples 一个公司可使用不同的运输业务场景,通过不同的处理类型或者运输方式来刻画: 要模型化这些不同的装运,你可以在配置中定义装运 ...

  4. adb shell 操作sqlite数据库

    程序中数据库文件路径在/data/data/<package  name>/databases/ adb shell   进入adb命令行 ls 列出当前文件夹下所有文件 假设有一个名为a ...

  5. Python笔记(十):正则表达式

    正则表达式对比工具 https://pan.baidu.com/s/1XIPyF1vFSj5PACPx9zW8_g (一)      正则表达式符号和特殊字符 符号 说明 示例 | 或 re1|re2 ...

  6. javascript获取网页各种高宽及位置总结

    screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系 ...

  7. window平台搭建Hudson服务器

    1.1    环境 Microsoft Windows server 2008 x64 1.2    资源下载 TortoiseSVN-1.7.11.23600-x64-svn-1.7.8.msi h ...

  8. Mac逆向--思维导图

  9. eclipse neon配置tomcat8无法显示默认页面解决方法

    下载对应tomcat8版本到本地后,在eclipse中添加tomcat8的对应目录,输入http://localhost:8080时无法显示tomcat的index.jsp页面(会显示404页面).原 ...

  10. Django中的DateTimeField格式

    转自:http://www.nanerbang.com/article/5488/ 创建django的model时,有DateTimeField.DateField和TimeField三种类型可以用来 ...