1。打开cmd命令窗口,node-v和npm-v可以查看相应的安装版本信息。

2。使用一下命令全局安装vue-cli。

1)npm install  -g  vue-cli

2)如果使用淘宝镜像,则是:npm install -g cnpm --registry=https://registry.npm.taobao.org

3.使用命令 vue init webpack vue-xxx 搭建vue项目, “vue-xxx” 是你的项目名称。

4.配置需要安装的vue环境(此处图片为复制粘贴):

5.目录结构:src中的就是我们要用到的。公共文件,单页vue文件等。

6.运行项目:npm run dev

7.压缩项目:npm run build(压缩之后的文件可以打包apk等等)

8.路由里边的引入:

1)设置import和下边的path引入。从login开始的文件都写在components之中。

2)此处的“mode:"history”。参考文档:https://router.vuejs.org/zh/guide/essentials/history-mode.html

3)还有另一种写法,这个更为简洁化,也更明确:

9.如果是从线上分值拉下来的,那么此时就需要安装依赖,安装完依赖之后再借此运行项目(npm run dev),打压缩包(npm run build):

npm install

VUE环境项目搭建以及简单的运行例子的更多相关文章

  1. Vue的项目搭建及请求生命周期

    目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...

  2. Python+selenium测试环境成功搭建,简单控制浏览器(firefox)接下来,继续学习其他浏览器上的测试环境搭建;学习Python语言,利用Python语言来写测试用例。加油!!!

    Python+selenium测试环境成功搭建,简单控制浏览器(firefox)接下来,继续学习其他浏览器上的测试环境搭建:学习Python语言,利用Python语言来写测试用例.加油!!!

  3. vue开发(开发环境+项目搭建)

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  4. (转)windows环境vue+webpack项目搭建

    首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要 ...

  5. node+mysql+vue+express项目搭建

    第一步:项目搭建之前首先需要安装node环境和MySQL数据库. 在已经完成上述的条件下开始进行以下操作: npm install @vue/cli -g   (-g 代表全局安装) 初始化项目  v ...

  6. VUE 脚手架项目搭建

    1. 概述 1.1 说明 vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目.GitHub地址是:https://github.com/vuejs/vue-c ...

  7. Vue之项目搭建

    一.Vue自动化工具的安装 nvm:nodejs 版本管理工具. 也就是说:一个 nvm 可以管理很多 node 版本和 npm 版本. nodejs:在项目开发时的所需要的代码库 npm:nodej ...

  8. Spring boot项目搭建及简单实例

    Spring boot项目搭建 Spring Boot 概述 Build Anything with Spring Boot:Spring Boot is the starting point for ...

  9. vue 环境的搭建及初始化项目

    其实超级简单,虽然网上很多,但是我顺便记录下相当于做笔记吧 1nodejs 的安装, 在node官网下载,点击安装,安装的时候最好选择路径在d盘 2设置环境变量 我的电脑-->属性-->系 ...

随机推荐

  1. 财务CLOUD成本核算

    1.关账  仓库账关账 2.应收应付是否已审核 生成财务应收应付 3.存货账关账 4.1采购存货核算 4.2零成本维护 4.3成本中心设置 4.4成本项目设置 4.5费用项目设置 4.6成本项目匹配方 ...

  2. springboot 注册dao层 service 层

    可以使用三种注解来引入DAO层的接口到spring容器中.1.@Mapper,写在每一个DAO层接口上,如下: 2.@MapperScan和@ComponentScan两者之一.前者的意义是将指定包中 ...

  3. 在Asp.Net Core中集成ABP Dapper

    在实际的项目中,除了集成ABP框架的EntityFrameworkCore以外,在有些特定的场景下不可避免地会使用一些SQL查询语句,一方面是由于现在的EntityFrameworkCore2.X有些 ...

  4. MT【325】垂心的向量形式

    设$H$为垂心,且$3\overrightarrow{HA}+4\overrightarrow {HB}+5\overrightarrow {HC}=\overrightarrow 0$,则$\cos ...

  5. Linux 下 fcitx 崩溃

    killall fcitx killall sogou-qimpanel fcitx & 输入以上命令

  6. slickedit编译调试linux应用程序

    目录 slickedit编译调试linux应用程序 工程建立 编译 智能报错跳转 配置编译环境 调试 title: slickedit编译调试linux应用程序 date: 2019/3/19 17: ...

  7. Apache Hadoop 2.9.2 的快照管理

    Apache Hadoop 2.9.2 的快照管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 快照相当于对目录做一个备份.并不会立即复制所有文件,而是指向同一个文件.当写入发生 ...

  8. 各类聚类(clustering)算法初探

    1. 聚类简介 0x1:聚类是什么? 聚类是一种运用广泛的探索性数据分析技术,人们对数据产生的第一直觉往往是通过对数据进行有意义的分组.很自然,首先要弄清楚聚类是什么? 直观上讲,聚类是将对象进行分组 ...

  9. python3 两层dict字典转置

    python3; 两层字典 dict =(type, dict2) dict2 = (k_value, index) dictss = { 10: {3: 1, 4: 2, 5: 3, 6: 4, 7 ...

  10. URL存在跨站漏洞http host头攻击漏洞解决方案

    最近项目部署的时候客户使用的绿盟扫描出一些漏洞,老大让我处理,经过看大神的博客等方式,分享一些简单的解决方法. 一 跨网站脚本 跨网站脚本(Cross-site scripting,通常简称为XSS或 ...