美文网首页
Vue-cli创建单页面网页

Vue-cli创建单页面网页

作者: caiyiii | 来源:发表于2019-06-22 10:29 被阅读0次

安装

npm install -g @vue/cli

创建项目

vue create 项目名

选择预设环境

使用键盘的上下键进行选择,enter键确定

  • 默认情况下是default(bable eslint)

bable:下一代JavaScript编译器,将es6语法编译为es5语法
eslint:规范代码行为,可组装的JavaScript和jsx检查工具

  • 可点击第二个,进行自主选择

键盘上下键选择,空格选中

  • 创建的项目各个文件

node_modules 依赖包
public 静态资源文件夹
favicon.ico 项目小图标
index.html 项目入口页面的模板
src 项目的源文件夹(存放的是需要webpack打包的文件)
.browserslistrc 里面所配置的是浏览器的兼容配置
.editorconfig 编辑器的配置规则
.eslintrc.js eslint的配置文件
babel.config.js babel的配置文件
postcss.config.js post的配置文件

  • 项目的启动

开发 npm run serve
生产 npm run build
lint npm run lint
目前脚手架将webpack配置都给集成进去,若需要配置可以通过配置vue.config.js的方式来修改

  • 首先找项目中的main.js文件

其中的$mount 是一个实例方法,能够在实例化vue对象之后,再挂载到页面上
render函数与template类似--HTML模板,h('div',['hellow',h('h1','我是h1标签')])相当于创建一个dom节点,在h里面加入第二个参数{}可以添加类名和样式
export default 表示es6中的暴露

相关文章

  • Vue-cli创建单页面网页

    安装 创建项目 选择预设环境 使用键盘的上下键进行选择,enter键确定 默认情况下是default(bable ...

  • 使用vue-cli+webpack搭建多页面应用

    1:首先你要搭建起vue-cli的单页面应用(这是前提) 2:创建好要生成新页面的html,vue,js等文件,下...

  • 10. 基于Vue+Element+nodeJs+Express

    一、创建vue单页面项目 我这里创建vue项目使用的是Vue-CLI脚手架,Vue CLI 是一个基于 Vue.j...

  • 我不知道

    # vue-cli构建单页面应用(个人博客) -------------------------- **[项目地址...

  • keepAlive使用方法

    vue单页面,多路由,前进刷新,后退不刷新 目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷...

  • Vue&React单页面应用的创建

    声明:Node和Npm的安装就不多说了 安装Vue-cli 创建my-app单页面应用 Vue Cli会在第一次创...

  • axios奇怪的post请求方式

    最近学习了一下vue-cli创建spa(单页面应用),在与后台交互的时推荐使用axios,用了一下,发现了很多坑。...

  • vue-cli3.x

    一、 VUE-CLI 脚手架 1.什么是vue-cli vue脚手架指的是vue-cli,它是一个专门为单页面应用...

  • vue-cli基础知识

    什么是vue-cli 慕课网教程vue-cli官网vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭...

  • 八,脚手架

    脚手架 vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程...

网友评论

      本文标题:Vue-cli创建单页面网页

      本文链接:https://www.haomeiwen.com/subject/qmnaoqtx.html