vue项目实战

本文实战为主,没有基础,真正的基础是要从实战开始:::

安集vue集成环境:

npm install -g vue-cli

执行vue检查安装情况:

Options:
-V, --version output the version number
-h, --help output usage information

Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]

查看安装包:vue list

★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple

说明默认使用了webpack打包

使用webpack模板

执行    vue init webpack sell

会提示安装好多 环境:

C:\Users\Administrator>vue init webpack sell

? Project name sell
? Project description sell app
? Author xsy
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue-cli · Generated "sell".

进入目录

cd sell

执行安装npm  install

安装好后  npm  run  dev   运行项目

提示下面这个的时候表示,能启用了

NE Compiled successfully in 109695ms 09:58:00

I Your application is running here: http://localhost:8080

原文地址:https://www.cnblogs.com/fgxwan/p/9933449.html

时间: 2024-11-04 16:32:25

vue项目实战的相关文章

Vue 项目实战系列 (三)

我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要一个后台,后台的代码可以从 https://github.com/EzrealDeng/Taopiaopiao里面的server 文件夹获取,这个server端具体怎么实现的我们暂时不用关心,只需要知道这是一个可以返回我们需要的数据的后台服务即可. 下载完后进入文件夹执行: npm run star

从零开始Vue项目实战(三)-项目结构

现在在浏览器中输入http://localhost:8083,可以看到初始的"Welcome to Your Vue.js App"页面了 目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面 │ ├── build.js 生产环境构建脚本 │ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷

vue项目实战爬坑小记002

1.如何使用vuex来保存数据(需要传参的情况下) 实例说明:登录->缓存用户信息->跳转到首页->从state获取用户信息显示在页面上 step1: 新建store.js作为初始化vuex的主文件,可在里面创建state对象,缓存数据字段,初始化vuex, 目录结构如下: store.js代码如下: 1 import Vue from 'vue'; 2 import Vuex from 'vuex'; 3 import * as actions from './actions'; 4

从零开始Vue项目实战(四)-路由

一.理解路由 传统的页面应用,是用一些超链接来实现页面切换和跳转的.而vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来. 路由中有三个基本的概念 route, routes, router. 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  about按钮 => about 内容, 这是另一条路由. 2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组.[{

vue项目实战爬坑小记003

太久没更新了.其实期间遇到了很多问题,都想着来整理和记录一下.可能是懒癌发作了吧,一直没动手记录.今天突破懒癌,重新来记录一波~~ 页面上如果要显示可编辑的保留数据格式的文本,可以有2种方式: 1. textarea标签中直接插入该数据的对象格式.有一个需要注意的坑是:如果修改里面的内容,容器不重绘的话,多个切换的时候内容不会变!!! 应该有人会吐槽: 不会用v-model 吗?小菜鸡~~~ 如果用了,确实能响应,但是不会显示这个格式, 而且如果直接绑定对象,就只会显示object文本. 1 <

Vue + Spring Boot 项目实战(一):项目简介 &#619178;

原文: http://blog.gqylpy.com/gqy/489 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

web前端Vue+Django&#160;rest&#160;framework&#160;框架&#160;生鲜电商项目实战视频教程 学习

web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 1.drf前期准备 1.django-rest-framework官方文档 https://www.django-rest-framework.org/ #直接百度找到的djangorestframework的官网是打不开的 2.安装依赖包 如图所示,django restframework的依赖模块,除了coreapi和django-guardian,已经在前面安装过了. 打开终端,执行安装命令

vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)

Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(https://router.vuejs.org/zh-cn/). 路由在全家桶里面定位是什么呢,创建单页应用!简单!我们知道Vuejs是一系列的组件组成应用,既然是组件那么就需要组合起来,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们! 我们一般在

2018 Vue+Django API前后端分离开发电商新技术跨域项目实战

课程目标帮助大家快速入门Django REST framework这一个API框架. 帮助大家详细了解Django REST framework中序列化.视图.路由等模块的使用. 帮助大家使用Django REST framework快速开发一套可用的API服务,并且自动生成API文档.适用人群Python开发工程师,后端开发工程师课程简介目前前后端分离的架构设计越来越流行,前后端通过API来实现数据通信.那如何快速开发一套符合RESTful风格的API呢?Django REST framewo