在本机搭建vue-cli3项目
vue-cli3官方网址:
https://cli.vuejs.org/zh/
由于公司开始一个新项目,用到的是vue-cli3搭建的项目,所以自己想搭建一个项目,今天搭建的项目就是一个很简单的项目,没有自己配置的项目,我的目的是想把步骤记录下来,一是当做自己的一个笔记,而是,对初学者来说,看到这些笔记会更容易上手一些,不过随着以后用的多,我还会继续更新进一步的东西,今天主要来记录一下,怎么在本机上搭建vue-cli3项目原型,其次怎么引进vue-router,话不多说,开始!
准备工作,安装node,安装git,不过今天的工作没用到git,这两个安装都是傻瓜式安装,不过多记录
1、首先在本地建一个文件夹,用来盛放项目,例如myProject
2、window键+r 输入cmd 打开终端
3、cd 到新建的文件夹 输入命令
npm install -g @vue/cli 这是安装vue脚手架
4、创建一个项目
vue create my-project
5,将项目拖到编辑器,打开终端,cd到 my-project项目 安装一下项目依赖包
npm install
6、运行此项目
- Local: http://localhost:8080/
- Network: http://192.168.0.113:8080/
就会弹出项目的主页面
将页面的内容删除一下,方便自己网上写内容 至此一个最原始的vue-cli3项目框架就被搭建起来了
接下来,我们会发现,vue-cli3搭建起来的项目并没有vue-router插件,下面记录一下怎么把vue-router插件引进来
首先给一个官方的vue-router网址:https://router.vuejs.org/zh/guide/#html 里面有许多api可以多研究一下
1、首先安装vue-router插件
npm install vue-router
2,在src目录先建立一个router文件,里面建立一个index.js,用来配置路由
index.js里的内容:
3、在app.vue里改成这样
至此,vue-router就引到项目中来了,可以随意的在router文件的index.js中配置路由了
后面会有一些关于vue-cli3的一些其它应用,我正在学习中,希望会对大家有所帮助
在本机搭建vue-cli3项目的更多相关文章
- vue-cli脚手架搭建Vue.js项目
前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g PS:-g 就是 ...
- vue cli3 项目配置
[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...
- Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目
前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...
- vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!
作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,we ...
- 使用Vue-cli3搭建Vue+TypeScript项目
一,创建项目 使用 npm 安装 vue-cli 3 和typescript npm i -g @vue/cli typescript 使用vue create命令快速搭建新项目的脚手架 vue cr ...
- vue cli3项目发布在apache www/vue目录下并配置history路由
注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...
- 「Vue」vue cli3项目打包为APP方法及坑点
1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...
- 让webstorm 识别vue cli3项目中的@路径别名
在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...
- vue cli3 项目优化
vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空 ...
随机推荐
- 怎么打乱List中元素的顺序
使用Collections类中shuffle随机打乱List内部元素顺序 原文地址:http://blog.csdn.net/warren2013/article/details/17414771 / ...
- httpClient创建对象、设置超时
从老版本和新版本进行比较说明: 1.创建HttpClient对象 3.X: HttpClient httpClient = new DefaultHttpClient(); 4.3: Closeabl ...
- PyCharm 基础设置
设置主题:File -- Settings -- Editor -- Color & Fonts -- Font -- Scheme 设置为 Darcula 设置字体:File -- Sett ...
- BugHD 与你的应用一起成长
BugHD 新增功能 1.新增安装量.启动量的统计功能 BugHD SDK 1.3.0新增安装量.启动量的统计功能,在崩溃分析页面右上角可看到安装量和启动量. BugHD 体验优化 1.Android ...
- js同步 异步 运行机制
需要知道的那些事: 1.JS是单线程的(为什么?因为能提高效率.作为浏览器脚本语言,js的主要用途是与用户互动,操作DOM.而这也就决定它只能为单线程,否则会带来很复杂的同步问题),也就是说无法同时执 ...
- Xshell 5 免费版本安装过程
发现本机的Xshell 5过期了用不了.在百度里搜索,下载安装后还是不可以使用.需要购买注册,后寻的一方法,分享给大家. 1.官网 进入官网,然后点击Download下方的Free License菜单 ...
- 《MySQL》一次MySQL慢查询导致的故障
本文转载自 http://www.jb51.net/article/70955.htm 我们知道分析MySQL语句查询性能的方法除了使用EXPLAIN 输出执行计划,还可以让MySQL记录下查询超过指 ...
- 微信redirect_uri 回调错误,scope权限错误
scope权限错误以及微信redirect_uri回调错误 昨天修改项目的时候,初始时,因为项目最开始使用的是第三方授权处理,拿到的用户openid是第三方账号的,所以需要将获取对方信息的代码修改.只 ...
- commander.js 制作简易的 MINA CLI 脚手架
出发点并不是小程序本身,是想要做一个脚手架(command-line interface),看过 VUE / REACT 脚手架,觉得很厉害,但是并不太知道里面是怎么做成的,所以最近研究了研究,看能不 ...
- excel多个sheet表拆分成独立的excel文件
一.问题: 公司做一个项目,给的用户上报文是一个包含多个sheet页的excel文件, 但是在实际处理报文数据的时候需要拆分excel文件为多个独立的报文excel文件 二.解决: (1)一个一个的复 ...