一丶项目配置

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 //页面文件

 <div id="app"></div>
  <script src="/UploadFiles/2021-04-02/bundle.js">

./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"vue";
import App from "./app.vue";
new Vue({
  el:"#app",
  render(h){
    return h(App)
  }
})

./App/app.vue //根组件
<template>
  <div>
    Hello World
  </div>
</template>
<script>
  export default {
  }
</script>
<style scoped>
</style>

5.cmd 中 npm run dev 跑一下

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

总结

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

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。