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、运行此项目

npm run serve
运行完之后 按ctrl键 点击 

- 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里的内容:

import Vue from 'vue'
import Router from 'vue-router'        //引入vue-router
import HelloWorld from '../components/HelloWorld.vue'   //引入HelloWorld页面
Vue.use(Router)
export default new Router({
  routes: [
    {//设置默认路由为HelloWorld页面
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
2、将router的配置引到项目中来,在main.js中设置
import Vue from 'vue'
import App from './App.vue'
import router from './router'               //将router配置引进来
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router                  //将router配置添加到vue实例
}).$mount('#app')
 
 
 

3、在app.vue里改成这样

<template>
  <div id="app">
    <router-view/>        //这里将视图加在这里
  </div>
</template>
<script>
  export default {
    name: 'app'
  }
</script>

至此,vue-router就引到项目中来了,可以随意的在router文件的index.js中配置路由了

后面会有一些关于vue-cli3的一些其它应用,我正在学习中,希望会对大家有所帮助

 
 

在本机搭建vue-cli3项目的更多相关文章

  1. vue-cli脚手架搭建Vue.js项目

    前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g   PS:-g 就是 ...

  2. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  3. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  4. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  5. vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!

    作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,we ...

  6. 使用Vue-cli3搭建Vue+TypeScript项目

    一,创建项目 使用 npm 安装 vue-cli 3 和typescript npm i -g @vue/cli typescript 使用vue create命令快速搭建新项目的脚手架 vue cr ...

  7. vue cli3项目发布在apache www/vue目录下并配置history路由

    注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...

  8. 「Vue」vue cli3项目打包为APP方法及坑点

    1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...

  9. 让webstorm 识别vue cli3项目中的@路径别名

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...

  10. vue cli3 项目优化

    vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空 ...

随机推荐

  1. 怎么打乱List中元素的顺序

    使用Collections类中shuffle随机打乱List内部元素顺序 原文地址:http://blog.csdn.net/warren2013/article/details/17414771 / ...

  2. httpClient创建对象、设置超时

    从老版本和新版本进行比较说明: 1.创建HttpClient对象 3.X: HttpClient httpClient = new DefaultHttpClient(); 4.3: Closeabl ...

  3. PyCharm 基础设置

    设置主题:File -- Settings -- Editor -- Color & Fonts -- Font -- Scheme 设置为 Darcula 设置字体:File -- Sett ...

  4. BugHD 与你的应用一起成长

    BugHD 新增功能 1.新增安装量.启动量的统计功能 BugHD SDK 1.3.0新增安装量.启动量的统计功能,在崩溃分析页面右上角可看到安装量和启动量. BugHD 体验优化 1.Android ...

  5. js同步 异步 运行机制

    需要知道的那些事: 1.JS是单线程的(为什么?因为能提高效率.作为浏览器脚本语言,js的主要用途是与用户互动,操作DOM.而这也就决定它只能为单线程,否则会带来很复杂的同步问题),也就是说无法同时执 ...

  6. Xshell 5 免费版本安装过程

    发现本机的Xshell 5过期了用不了.在百度里搜索,下载安装后还是不可以使用.需要购买注册,后寻的一方法,分享给大家. 1.官网 进入官网,然后点击Download下方的Free License菜单 ...

  7. 《MySQL》一次MySQL慢查询导致的故障

    本文转载自 http://www.jb51.net/article/70955.htm 我们知道分析MySQL语句查询性能的方法除了使用EXPLAIN 输出执行计划,还可以让MySQL记录下查询超过指 ...

  8. 微信redirect_uri 回调错误,scope权限错误

    scope权限错误以及微信redirect_uri回调错误 昨天修改项目的时候,初始时,因为项目最开始使用的是第三方授权处理,拿到的用户openid是第三方账号的,所以需要将获取对方信息的代码修改.只 ...

  9. commander.js 制作简易的 MINA CLI 脚手架

    出发点并不是小程序本身,是想要做一个脚手架(command-line interface),看过 VUE / REACT 脚手架,觉得很厉害,但是并不太知道里面是怎么做成的,所以最近研究了研究,看能不 ...

  10. excel多个sheet表拆分成独立的excel文件

    一.问题: 公司做一个项目,给的用户上报文是一个包含多个sheet页的excel文件, 但是在实际处理报文数据的时候需要拆分excel文件为多个独立的报文excel文件 二.解决: (1)一个一个的复 ...