webpack 不使用 开发vue_webpack vue-cli vue开发 - CSDN
精华内容
参与话题
  • vue.js webpack

    项目环境搭建:

    1.安装node

    点击下面链接进行下载:

    node官网 https://nodejs.org/en/

    版本查看:

    运行命令行 cmd,然后输入 node -v 查看node版本:

    这里写图片描述

    注意:node版本最好新一点好,推荐6.0以上。

    2.全局安装vue-cli

    在命令行输入:

    npm install-g vue-cli

    3.创建一个基于 “webpack” 模板的新项目

    vue init webpack project-name(默认安装2.0版本)

    vue init webpack#1.0 project-name(安装1.0版本)

    项目目录结构:

    这里写图片描述

    这里写图片描述

    • main.js 是我们的入口文件,主要作用是初始化vue实例并使用需要的插件
    import Vue from 'vue'
    import App from './App'
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
    })
    
    • App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
      </div>
    </template>
    
    <script>
    import Hello from './components/Hello'
    
    export default {
      name: 'app',
      components: {
        Hello
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    • index.html文件入口

    • src放置组件和入口文件

    • node_modules为依赖的模块

    • config中配置了路径端口值等

    • build中配置了webpack的基本配置、开发环境配置、生产环境配置等


    运行项目:

    • 1.cd project-name

    • 2.npm install

    • 3.npm run dev

    • 4.在浏览器输入localhost:8080

    展开全文
  • webpack+vue创建简单项目

    万次阅读 2017-02-08 14:52:22
    用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的, 所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识: nodejs安装: ...

    -- 安装nodejs

    用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,
    所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:

    -- 安装命令行工具

    npm install -g vue-cli
    -g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用.

    红框里是安装命令,由于npm网站在国内速度非常慢,所以在命令后面加上淘宝的镜像,
    很快就安装好了.也可以使用cnpm安装.

    安装后在命令行输入 vue -version 能看到版本号表示全局安装成功,下面就可以使用命令行创建项目了.

    -- 创建项目框架

    vue init webpack my-project
    创建一个基于"webpack"的项目,后面是项目名,

    按照提示输入,项目名,项目描述,项目作者等等,看到最后这句项目就创建好了,
    项目结构:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的

    刚我们命令行输入的东西就在package.json这个文件里,打开文件

    项目名字,版本,描述,作者等,后面还有运行项目命令,项目依赖,开发环境项目依赖等.

    -- 安装依赖

    生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装,
    ctrl+c 停掉刚生成项目的命令,cd vue-project 进入项目跟目录, 用命令npm install 安装

    同样是使用淘宝镜像.

    当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖,
    可以看到有很多模块,这些模块都是在package.json文件里定义好了的.

    dependencies是项目依赖,
    devDependencies是开发时项目依赖.

    -- 运行测试

    好了,依赖安装完成后就可以运行我们的项目了命令:
    npm run dev

    看到这样的输入项目就运行起来了,然后打开浏览器,输入第二个红框的地址 localhost:8080,
    浏览器截图.

    展开全文
  • vue-cli3 的webpack配置

    万次阅读 2018-11-23 14:15:26
    @vue/cli的webpack配置 查看默认配置 因为Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的, 把一些常用的内容配置好. vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。 vue inspect &...

    @vue/cli的webpack配置

    查看默认配置

    因为Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的, 把一些常用的内容配置好. vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。

    vue inspect > output.js
    

    将webpack默认配置, 重定向到一个文件中.

    其中的一段为:

    plugins: [
        /* config.plugin('vue-loader') */
        new VueLoaderPlugin(),
        /* config.plugin('define') */
        new DefinePlugin(
            {
                'process.env': {
                    NODE_ENV: '"development"',
                    BASE_URL: '"/"'
                }
            }
        ),
    

    这里定义了

    • process.env.NODE_ENVdevelopment

    • process.env.BASE_URL/

    自定义webpack

    主要是按照官方文档的说明

    调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象:

    // vue.config.js
    module.exports = {
      configureWebpack: {
        plugins: [
          new MyAwesomeWebpackPlugin()
        ]
      }
    }
    

    该对象将会被 webpack-merge 合并入最终的 webpack 配置。

    警告

    有些 webpack 选项是基于 vue.config.js 中的值设置的,所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path;你应该修改 vue.config.js中的 baseUrl 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方,以确保所有的部分都能正常工作在一起。

    如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象:

    // vue.config.js
    module.exports = {
      configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
        } else {
          // 为开发环境修改配置...
        }
      }
    }
    
    展开全文
  • 创建基于webpack打包的vue项目

    万次阅读 2020-05-26 10:02:19
    结合win7、element-ui、vuevue-router、vue-cli)、webpack等技术,完成了项目的基础工作。难则不会,会则难;贵在经验总结,后期可参。 花絮 · 先预览 - 项目目录结构图 一、 项目初建、编译打包、服务器配置...

    结合win7、element-ui、vue(vue-router、vue-cli)、webpack等技术,完成了项目的基础工作。难则不会,会则不难;贵在经验总结,后期可参。
    项目截图预览:
    在这里插入图片描述


    花絮 · 先预览 - 项目目录结构图

    在这里插入图片描述


    特别注意 · 比如:

    • 我想创建一个项目,项目文件夹名称为:mywebpack
      • 并且想把项目文件夹的路径设定在 C:/user/mywebpack

    • 全程使用cmd命令创建vue项目,它会从无开始创建。
      • 那么,此时你的C:/user/路径下,就不应该存在文件夹/mywebpack
    • (下面我们开始创建一个项目,步骤如下:)

    一、 项目初建、编译打包、服务器配置 大致分析:【以上图为例】

    1. 指定workplace,开始初建项目:
      cd 目标位置路径(如:C:\Users)
    • 或者:你直接在目标地点Shift + 右键,运行 “在此处打开命令窗口”
    1. 安装vue:
      cnpm install -g vue-cli

    2. 创建一个基于 “webpack” 模板的新项目:
      vue init webpack mywebpack 【mywebpack:项目文件夹名称】

    3. 安装依赖,以及其他脚手架element-ui:
      cd my-first-project
      npm i element-ui -S
      npm install

    4. 运行项目:
      npm run dev

    5. vue开发环境搭建完毕,监听8080端口,浏览器查看:
      localhost:8080

    6. 编译打包:
      cd 项目文件物理路径,如:cd C:\Users\mywebpack
      npm run build

    7. 编译打包完成之后,进行简单文件url或src路径调整;
      如下文【二、】注意(3) 中,所提示

    8. 服务器配置 / 部署
      如下文【五、】参看文章(2) 中,所提示


    二、 cmd 命令 :webpack编译打包

    npm run build 仔细拼写错误!

    在这里插入图片描述

    【打包编译】完成之后,生成dist文件,【截图如下】
    在这里插入图片描述

    注意:
    • (1) npm run build项目打包命令,运行这个命令后会生成可以进行上线的打包文件;
    • (2) 这时候打开根目录下的index.html就可以直接看到你的项目效果了
    • (3) 测试过程中,双击index.html页面出现空白、图片不显示等现象,仔细更改一下src引入路径即可。

    留意:
    • webpack 编译图片是有规则的,你可以自己配置小于多少M的图片进行编译,目前我的情况是只将一些小的图片编译了,vue也是从页面优化的角度出发,大图片编译成 base64 的话,得不偿失,会造成加载页面文件太大,小的图片编译是为了减少 http 请求,从而提升加载效率。
    • 当然图片较大,编码会消耗性能。因此url-loader 提供了一个limit 参数,小于limit字节的文件会被转为dataUrl,大于limit的会使用file-loader进行Corp。

    三、 相关截图,如下:

    在这里插入图片描述

    在这里插入图片描述


    四、 vue里 npm run build之后,应该怎么运行

    项目开发完成之后,可以使用npm run build进行打包工作。打包完成之后,会生成dist文件夹,项目上线时候,只需要将dist文件夹放到服务器就行了。
    [可参考链接:*附3]


    五、 附 · 参考文章:


    以上就是关于“ 创建基于webpack打包的vue项目 ” 的全部内容。

    展开全文
  • 使用HBuilderX编写第一个Vue项目之js

    万次阅读 2019-04-28 10:59:37
    HBuilderX使用流程 首先建好文件目录后 我的文件结构如下: 使用HBuilderX自带终端命令窗口 导入jQuery 1.npm init -y 初始化 2.npm i jquery -S 导入jquery 导入后直接引用js文件浏览器会报错:...
  • 各种框架开发是相当流行,今天,带大家使用vue-cli搭建简单的vue+webpack热更新项目。 准备工作:你的电脑要安装node(自带npm),这一点就多说了,作为前端必备,哈哈。 第一步:使用npm全局安装webpackvue-...
  • 浅谈vue+webpack项目调试方法

    万次阅读 2017-07-03 14:04:28
    有人觉得vue项目难调试,是因为用了webpack。所有代码揉在了一起,还加了很多框架代码,根本知道怎么下手。
  • new webpack.optimize.UglifyJsPlugin({ //自动删除console.log compress: { warnings: false, drop_debugger: true, drop_console: true }, sourceMap: true }),  ...
  • vue+webpack+thinkphp多页应用配置

    千次阅读 热门讨论 2017-03-23 23:14:51
    vue+webpack+thinkphp多页应用配置介绍
  • vue前端开发项目框架搭建(node+webpack+vue)

    万次阅读 多人点赞 2017-12-11 00:14:03
    vue前端开发项目框架搭建(node+webpack+vue), 后台系统模板
  • webpack常见面试题

    千次阅读 2019-06-27 10:57:46
    1.从零开始搭建一个简单的基于webpackvue开发环境 a.安装webpack npm i webpack -g b.项目初始化 1)新建项目文件夹‘myproject’ 2)创建package.json.。 npm init -y 3)安装vue,webpack,webpack-dev-...
  • webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法前言很久没有更新关于webpack+vue的内容了。前面承诺过大家告诉大家如何打包到子目录的。由于太忙,也忘记了。今天补充两个知识点给大家。将接口配置...
  • vue cli项目中,main.js是入口文件,定义了vue实例,并引入了整个项目的根组件app.vue,并将其挂载到index.html中id为‘app’的节点上。
  • VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址前言我们在开发项目的时候,往往会在同一个局域网进行开发,前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是,当项目推到线上...
  • vue+webpack构建项目过程

    千次阅读 2016-11-26 12:04:22
    当前最流行的框架和构建工具
  • vue项目中webpack打包后字体生效

    千次阅读 2017-09-20 15:01:23
    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境生效。如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但...
  • webpack中配置.vue组件页面的解析 运行cnpm i vue -S将vue安装为运行依赖; 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖; 运行cnpm i style-loader css-loader -D将解析...
  • 最近用vue来做项目,用webpack来做前端自动化构建。webpack-dev-server会在本地搭建一个服务器,在和后端调试的时候,就会涉及到跨域的问题。刚开始时,没有用vue-cli来构建项目,而是参考了github上的vue-vueRouter...
  • Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》,我们已经新建好了一个基于vue+webpack的项目。本篇博文将详细的厘清一下这个...
  • vue-cli 3.0版本webpack打包

    千次阅读 2018-11-21 14:36:24
    新项目使用vue-cli 3版本,发现项目中没有build目录,看了vue-cli文档后,大致清楚了如何修改 首先在package.json同级目录下创建新文件vue.config.js vue.config.js中的内容会覆盖默认的打包配置 function ...
1 2 3 4 5 ... 20
收藏数 42,864
精华内容 17,145
关键字:

webpack 不使用 开发vue