在安装vue-cli之前,要先安装node.js这个大家百度一下就可以了

1、安装 vue-cli

npm install -g @vue/cli-init

2、初始化一个项目,名为 hcmanage ,并选择使用 webpack 打包方式

vue init webpack hcmanage 

3、切换到 hcmanage 目录下

cd hcmanage 

最终生成的网站文档结构如下

4、启动 hcmanage 网站

npm run dev

执行结果如下:

PS E:\系统源码\vue\hcmanage> npm run dev

> hcmanage@1.0. dev E:\系统源码\vue\hcmanage
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js % % % % % % % building modules / modules active ...ex=!E:\系统源码\vue\hcmanage\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
% % % % % % % emitting DONE Compiled successfully in 26954ms :: PM
I Your application is running here: http://localhost:8080

可以看到最终生成的网址为:http://localhost:8080

这个网址可以在config/index.js进行修改,如下图:

可以在浏览器中输入对应的网址:http://localhost:8080 可以看到以下的网站页面,表示网站生成成功

异常问题及处理:

1、Trailing spaces not allowed

原因:文件中行后有空格

解决方法:把空格去除就可以了

2、Expected linebreaks to be 'LF' but found 'CRLF'

原因:因为操作系统不同导致默认换行符不一样导致的

解决方法:找到 .eslintrc.js ,在文件的Rules中增加一条rule :

'linebreak-style': [0, 'error', 'windows']

3、Missing semicolon

原因:丢失分号,JS中有的语句没有分号结尾

解决方法:对应的语句后面添加分号就可以了

4、Missing trailing comma

原因:这个是 json 对象后面没有逗号

解决方法:在 json 对象报错的行数后面添加逗号就可以了

5、Unexpected use of file extension "vue" for "./components/****.vue"

原因:引用文件的时候加上了后缀名.vue

解决方法:去掉后缀名.vue

6、Unexpected use of file extension "js" for "./components/****.js"

原因:引用文件的时候加上了后缀名.js

解决方法:去掉后缀名.js

7、Expected exception block, space or tab after '//' in commen

原因:这个是注释符后面的缩进有问题

解决方法:在注释符 ’//‘ 后加加个空格、tab、block 就可以了

vue学习笔记(一): 建立 vue-cli 初始网站的更多相关文章

  1. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  2. vue学习笔记:在vue项目里面使用引入公共方法

    首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了 ...

  3. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  4. vue学习笔记-初始化一个vue项目(1)

    1.cnpm install -g vue-cliUsage:vue init <template-name> <project-name> 2.我们一般使用webpack模版 ...

  5. vue学习笔记:Hello Vue

    编写简单例子,了解下基本语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8 "&g ...

  6. 【Vue 学习笔记 一、Vue开发环境搭建】

    搭建Vue的开发环境 1.首先安装Nodejs  (因为我的系统是Windows的所以就选择第一个了,这个看个人的开发环境) 下载好后,然后一路确定,如果有更改安装目录的需求,就自己切换安装目录,由于 ...

  7. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  8. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  9. vue学习笔记之:为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  10. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

随机推荐

  1. Java面试必备:手写单例模式

    面试官:请手写下几种常见的单例模式 我:好的(面带微笑),心里暗喜(送分题). 没成想提笔便写出了如此豪放的代码,不堪回首,请原谅我的不羁! 此篇整理了几种常见的单例模式代码示例,再有面试官让手撕单例 ...

  2. llinux/重启/用户切换/注销

    一.指令 shutdown命令 shutdown -h now //立即关机 shutdown -h 2 //分钟后关机 shutdown -r now //立即重启 shutdown -r 1 // ...

  3. 清新三角格子风工作报告季度总结年终汇报通用PPT模板

    选好合适的PPT模板,确定好主题,一个漂亮的PPT首先要简洁,其次文字不要太多,能用图片或视频讲解的最好用图片或视频.做好ppt后,对于讲解演示,也要提前做好练习准备. 模版来源:http://ppt ...

  4. Vue-easyui中如何给ComboGrid添加过滤器

    1,给ComboGrid绑定监听事件,将事件对象传入.文档:http://www.jeasyui.net/vue/653.html @filterChange="example($event ...

  5. expect 知识与示例说明

    expect 知识与示例说明 2012/04/10 chenxin 2019/07/07 update Chenxin 参考 https://www.cnblogs.com/yinghao1991/p ...

  6. WePy框架的使用

    基本示例 import wepy from 'wepy';//引入wepy框架说明 // 通过继承自wepy.page的类创建页面逻辑 export default class Index exten ...

  7. opensciencegrid - GridFTP 安装

    最近配置一个GridFTP 用于测试其传输FTP性能, 在这里简单记录,备忘:使用本教程可以简单起一个GridFTP用于测试服务: 预配置环境: 测试系统:CentOS 7 1806 配置Yum仓库: ...

  8. JUC-8-lock和Condition使用

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADHCAYAAABySz3ZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw ...

  9. C++ class 内的 () 重载示例

    #include <iostream> // overloading "operator () " outside class //////////////////// ...

  10. SQL Server 移位运算符

    参考链接:http://dataeducation.com/bitmask-handling-part-4-left-shift-and-right-shift/ SQL Server 官网的连接:h ...