文章目录

  • 新建脚手架工程
  • 配置vue.config.js文件
    • 启动项目时自启动浏览器
      • 编辑演示
    • 关闭eslint检验
      • 编辑演示
  • less语法爆红
  • 组件名异常
    • 解决方案
  • 安装vue-router
    • 别忘了注册使用
  • 路由path异常
    • 解决方案
  • vue脚手架加载静态图片

新建脚手架工程

脚手架安装入门-by鬼鬼骑士

配置vue.config.js文件

启动项目时自启动浏览器

 devServer: {open: true,host: 'localhost',},

编辑演示

关闭eslint检验

 lintOnSave: false,

编辑演示

配置vue.config.js文件

less语法爆红

  • 浏览器默认是不识别less语法的,所以要安装lessloader

Vue - 安装less-loader

  • vue文件中css样式也是不识别less语法,我们在style标签中写上lang=“less”

组件名异常

解决方案

  • 是字符格式问题,取消空格和tabs检测
  • 编辑package.json文件
         "no-mixed-spaces-and-tabs": 0

安装vue-router

查看vue-router所有版本,因为我们是vue2工程,所以我们用低一点的版本

npm view vue-router versions

安装vue-router3.0

npm install vue-router@3

别忘了注册使用

路由path异常

解决方案

  • 引入路由时需要对应的页面识别时才能不报错
  • 就这个,只要引入路由,就要有对应的路由页面,哪怕是空的

vue脚手架加载静态图片

    <img :src="require('@/img/bg/bg.jpg')" alt="" /> <!-- 成功 -->

Vue脚手架工程 - 新建项目时注意事项、与配置工程时经验总结相关推荐

  1. Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置

    Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置

  2. 7004.vue脚手架快速生成项目

    文章目录 1 Vue脚手架可以快速生成Vue项目基础的架构. 1.1 安装3.x版本的Vue脚手架: 1.2基于3.x版本的脚手架创建Vue项目: 1.3 分析Vue脚手架生成的项目结构 2 vue脚 ...

  3. Vue脚手架创建的项目的启动流程

    Vue脚手架创建的项目的启动流程 当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析. 入口分析 首先从package.json中的脚本配置来看,np ...

  4. Vue 脚手架CLI 初始化项目

    1 介绍 CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架. Vue CLI是一个官方发布vue.js项目脚手架 使用vue-cli可以快速搭建vue开发环境以及 ...

  5. Vue脚手架安装及项目搭建(mac版)

    前提:电脑上已经安装好了npm vue脚手架全局安装终端命令 $ sudo npm install -g vue-cli 安装完成之后检测 $ vue -V 如果终端输出vue的版本号,那么脚手架就安 ...

  6. vue脚手架项目如何加入html文件,使用vue脚手架怎么搭建项目

    使用vue脚手架搭建项目的方法:1.全局安装vue-cli脚手架:2.打开命令提示符,通过cd命令进入项目所在文件夹:3.创建vue-cli工程项目:4.安装依赖:5.启动项目. 本教程操作环境:wi ...

  7. Vue脚手架创建TS项目

    What is TS? TS语言,也就是TypeScript,是前端一个非常强大的语言超集,基于JavaScript. TS的强大吸引了许许多多的前端开发者学习使用. TS最大的特点,就是在JavaS ...

  8. 在手机上查看和测试vue脚手架搭建的项目

    ①  打开cmd输入命令ipconfig,获取到本机的IP地址: ②  得到IPV4值,然后用该值替换localhost: ③  找到vue项目的config文件夹下的index.js文件,打开后将h ...

  9. vue脚手架做的项目如何放在服务端,vue项目部署到服务器

    在项目目录下(如:e:\workspace\taobao)运行 npm run build即可,完成后,就会在项目目录下有多一个dist目录,把dist下的内容就可以放在web服务器上了. 哈哈,完了 ...

最新文章

  1. 为什么我的python程序编译器没有行代号_为什么我的python字典没有附加新变量呢?...
  2. python 多线程及线程间通信
  3. 烂泥:vcenter5.5无AD下的安装与配置
  4. 基于keepalived对redis做高可用配置---转载
  5. 基于Spring+SpringMVC+Mybatis的分布式敏捷开发系统架构(附源码)
  6. flutter制作具有自定义导航栏的渐进式 Web 应用程序
  7. [文摘]上软解散相关
  8. Jenkins主从节点配置
  9. java文字旋转90度_菜鸟求助:在 JAVA APPLET 里如何旋转 90 度显示一个字符?
  10. 快速安装Docker图形化管理平台ShipYard
  11. android分析之Binder 01
  12. ubuntu-16.04安装程序报错 you might want to run 'apt-get -f install' to correct these
  13. php mysql zend linux,Linux系统安装配置PHP+MySQL+zend+PHPadmin开发环境
  14. Rust 智能指针(二)
  15. amd cpu排行_amd cpu性能排行图_笔记本CPU性能排行天梯图-2012最新笔记本CPU天梯图...
  16. 什么是软件EV代码签名证书
  17. 用matplotlib高仿同花顺的K线,成交量,MACD,KDJ(一)
  18. 虎扯:《小苹果》为什么那么火
  19. 从前端出发做好SEO需要考虑什么
  20. 五、Springboot 整合Shiro---03认证---第三方QQ登陆

热门文章

  1. 打字练习软件——JavaFx
  2. 华为FusionCompute之个人学习环境虚拟化嵌套部署方案
  3. [Element]给项目中所有的dialog添加打开关闭监听
  4. python3读写excel,计算学分绩
  5. 劉國增(河南原陽): 幻方新品種--胞胎幻方(中)
  6. python语法(三)字符串
  7. 新版firefox中没有firebug了
  8. ThreadPoolExecutor不抛异常
  9. CountDown原理及使用
  10. Ensemble Learning常见方法总结(Bagging、Boosting、Stacking、Blending)