在本机搭建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笔记:vue项目引入bootstrap、elementUI、echarts
- 从0搭建vue后台管理项目到颈椎病康复指南(一)
- Vue_(Router路由)-vue-router路由的基本用法
- Vue_(组件通讯)单项数据流
- Vue - 路由守卫使用
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue项目el-input键盘事件
- Web前端 - Vue
- vue表单校验必填项
- vue全局组件和局部组件
- [Vue] Get up and running with vue-router
- vue指令:v-text和v-html
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue项目中sass全局引用变量 sass-resources-loader webpack配置
- 毕设/私活/bigold必备项目,一个挣钱的免费的全开源标准前后端分离后台管理权限系统【springboot+vue+redis+Spring Security】脚手架搭建:若依Ruo框架具体使用教程
- vue项目该不该使用eslint验证?
- 怎样使用vue cli脚手架工具快速搭建vuejs项目和配置文件的具体步骤
- 怎样给vue项目重命名
- Vue项目中使用继承extends实现复用代码
- 计算机毕设项目 40个高质量SSM+VUE毕设项目分享【源码+论文】(四)
- Vue中vue-i18n结合vant-ui实现国际化
- 164:vue+openlayers在3857坐标系项目下导出KML文件
- vue+webpack+npm搭建的纯前端项目
- 一文教会你如何运行vue项目
- Vue创建项目快速体验