热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Vue起步(无cli)的啊教程详解

本文通过实例代码给大家介绍了Vue起步(无cli)的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

一丶项目配置

1. 创建身份证文件
2. 安装webpack webpack-cli  webpack-dev-server(全局)工具
3. 安装,配置vue vue-loader  vue-template-compiler  less-loader css-loader  style-loader  less
4. 构建项目目录,更改配置文件

./index.html //页面文件

 

./package.json //身份证文件

'dev':'webpack-dev-server'

./webpack.config.js //配置文件

配置webpack和webpack-dev-server,也可通过vcode插件
配置vue-loader,
配置 less-loader
配置vue别名

//引入node的path路径组件和vueloader插件
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
 //工作模式
 mode: 'development',
 //入口
 entry: path.resolve("./app/main.js"),
 //出口
 output: {
  publicPath:'dist',
  filename:"bundle.js"
 },
 module: {
 //配置loader
  rules: [{
   test: /.jsx?$/,
   include: [
    path.resolve(__dirname, 'app')
   ],
   exclude: [
    path.resolve(__dirname, 'node_modules')
   ],
  },
  {
   test: /\.vue$/,
   loader: 'vue-loader'
  },
  {
   test: /\.less$/,
   use: [
    'vue-style-loader',
    'css-loader',
    'less-loader'
   ]
  }
 ]
 },
 //杂项
 resolve: {
 //省略文件格式
  extensions: ['.json', '.js', '.jsx','vue']
 },
 plugins: [
 //使用vueloader插件
  new VueLoaderPlugin()
 ]
};

./App/main.js  //入口文件
import Vue from "vue";
import App from "./app.vue";
new Vue({
  el:"#app",
  render(h){
    return h(App)
  }
})

./App/app.vue //根组件


5.cmd 中 npm run dev 跑一下

现在就已经启动wepack-dev-server了,127.0.0.1:8080页面就能够实时更新啦!!

总结

以上所述是小编给大家介绍的Vue起步(无cli)教程详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


推荐阅读
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 本文介绍了两个重要的Node.js库——cache-content-type和mime-types,它们在处理HTTP响应头时非常有用。cache-content-type是基于mime-types构建的,并且实现了缓存机制以提高性能。 ... [详细]
  • 本文详细介绍了如何在ReactJS项目中集成Onsen-UI的ActionSheetButton组件,并通过具体示例展示了其使用方法及效果。 ... [详细]
  • 现在的新手程序猿,动不动就是框架,就连外面培训的也是框架,我就问一句,没了框架是不是就啥也不会了 ... [详细]
  • Docker基础入门与环境配置指南
    本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ... [详细]
  • 页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面,建议采用SSR(服务器端渲染),如Nuxt等框架。更多优化策略可参见:https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • Python3爬虫入门:pyspider的基本使用[python爬虫入门]
    Python学习网有大量免费的Python入门教程,欢迎大家来学习。本文主要通过爬取去哪儿网的旅游攻略来给大家介绍pyspid ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]
  • Node.js模块化的优势及实践
    本文探讨Node.js模块化的重要性和具体实现方式,包括其带来的代码复用性增强、可维护性提升、以及如何有效避免命名冲突等问题。 ... [详细]
  • 将XML数据迁移至Oracle Autonomous Data Warehouse (ADW)
    随着Oracle ADW的推出,数据迁移至ADW成为业界关注的焦点。特别是XML和JSON这类结构化数据的迁移需求日益增长。本文将通过一个实际案例,探讨如何高效地将XML数据迁移至ADW。 ... [详细]
  • JavaScript 跨域解决方案详解
    本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
  • 本文探讨了如何在 Spring MVC 框架下,通过自定义注解和拦截器机制来实现细粒度的权限管理功能。 ... [详细]
author-avatar
heishi86188
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有