安装Vue脚手架和创建一个简单的Demo
https://www.cnblogs.com/pengjunhao/p/6762141.html
https://www.cnblogs.com/yanxulan/p/8978732.html
查看node和npm的版本
node -v 或者 node --version
npm -v
cnpm -v
在中国为了提高效率,一般使用淘宝的镜像
npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了
假设上面的全部安装完毕,
全局安装vue-cli
npm install --global vue-cli
如果是在mac电脑上,记得先sudo下
安装完毕,查看下 vue --version
脚手架安装成功后,就可以自己创建一个新的项目。
选择合适的目录进去,
运行 vue init webpack demo9之后敲击回车键
会自行下载一些模版,稍加等待,之后跳出一些需要填写的项目,如下
项目名称: 不支持大写字符了
项目描述:
一头雾水继续往下创建
创建完毕之后,进入目录下
cd demo9,看下现在的目录结构
npm i 或者用npm install 去下载需要的依赖
npm run dev
最后运行成功,告知了你的项目运行的url,自己打开浏览器输入,ok,出来了~~~
Vue.js 不支持 IE8 及其以下 IE 版本。
新增加一个component,在Src包下的components目录下,新建一个Show.vue,里面塞入空模版
为了显示的更有代表性,我把HelloWorld中的模版内容删除了,也换了logo
注意代码是从index.html ------ main.js -------App.vue
下一步想将vue组建,累加使用
添加路由
npm install vue-router --save
之后在main.js 中引入
安装Vue脚手架和创建一个简单的Demo的更多相关文章
- 使用.Net Core + Vue + IdentityServer4 + Ocelot 实现一个简单的DEMO +源码
运行环境 Vue 使用的是D2admin: https://doc.d2admin.fairyever.com/zh/ Github地址:https://github.com/Fengddd/Perm ...
- vue 学前班002(创建一个实例)
创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...
- 如何创建一个简单的Visual Studio Code扩展
注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种 ...
- npm——安装教程、安装vue脚手架
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题.比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并安 ...
- 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(三)(错误整理篇)
使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(二) 以上两篇已经把流 ...
- django创建一个简单的web站点
一.新建project 使用Pycharm,File->New Project…,选择Django,给project命名 (project不能用test命名) 新建的project目录如下: ...
- 一个先进的App框架:使用Ionic创建一个简单的APP
原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...
- 利用HTML5与jQuery技术创建一个简单的自动表单完成
来源:GBin1.com 在线演示 在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...
- node创建一个简单的web服务
本文将如何用node创建一个简单的web服务,过程也很简单呢~ 开始之前要先安装node.js 1.创建一个最简单的服务 // server.js const http = require('http ...
随机推荐
- 【Leetcode_easy】706. Design HashMap
problem 706. Design HashMap solution1: class MyHashMap { public: /** Initialize your data structure ...
- C#实现动态发布IIS站点帮助类
准备工作: 1.引用 System.DirectoryServices 系统程序集 2.引用 Microsoft.Web.Administration 程序集,类库位置在 C:\Windows\Sys ...
- 最新 东方财富java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.东方财富等10家互联网公司的校招Offer,因为某些自身原因最终选择了东方财富.6.7月主要是做系统复习.项目复盘.Leet ...
- Python创建文件报错OSError:[Errno 22] Invalid argument处理
问题: windows平台下使用python open函数w模式打开文件报错“OSError: [Errno 22] Invalid argument: '../news/“消费升维”成零售业新风口? ...
- EMR的fair-scheduler.xml
cat /etc/ecm/hadoop-conf/fair-scheduler.xml <?xml version="1.0"?> <allocations> ...
- 安卓版 WPS 使用电脑字体、安卓版 WPS 添加字体、安卓 WPS 无法显示文档真实字体(24)
1. 前言 安卓版WPS默认只有那么几种字体,查看电脑的Office文档无法显示文档的真实字体.想要用更多的字体需要开会员,这里提供免费方案. 2. 操作步骤 1.先在手机中打开一个要查看的文档: 2 ...
- python读写文件的操作
编程语言中,我们经常会和文件和文件夹打交道,这篇文章主要讲的是Python中,读写文件的常用操作: 一.打开文件 openFile = open('../Files/exampleFile.txt', ...
- Vue路由系统
Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...
- WUSTOJ 1275: 男神的逆袭(Java)
1275: 男神的逆袭 题目 计算两个日期相差的天数.更多内容点击标题. 分析 下面说一下我的思路(自己写的,无扩展性): 给定一个日期,首先计算这个日期是这一年的第多少天. 给定两个日期,直 ...
- MySQL 解决source 命令导入数据库 乱码
在我把库.表.sql脚本的编码格式都设置为UTF-8后,任然有乱码,任然有报错: 于是按以下方式重新登录后,解决: mysql -u root -p --default-character-set=u ...