精华内容
下载资源
问答
  • 使用 vue init webpackvue init webpack-simple 创建vue工程后,使用ivew报错 安装iview npm install view-design --save 引入 ViewUI 一般在 webpack 入口页面 main.js 中如下配置: import Vue from 'vue'; ...

    使用 vue init webpack 或 vue init webpack-simple 创建vue工程后,使用ivew报错

    微信公众号:前端程序猿之路
    关注可了解更多的前端知识,反馈问题或建议,请公众号留言。
    如果你觉得公众号内容对你有帮助,欢迎关注并转载

    安装iview

    npm install view-design --save
    

    引入 ViewUI
    一般在 webpack 入口页面 main.js 中如下配置:

    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import App from 'components/app.vue';
    import Routers from './router.js';
    import ViewUI from 'view-design';
    import 'view-design/dist/styles/iview.css';
    
    Vue.use(VueRouter);
    Vue.use(ViewUI);
    
    // The routing configurationconst RouterConfig = {
    routes: Routers
    };
    const router = new VueRouter(RouterConfig);
    
    new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
    });
    

    报错如下:在这里插入图片描述
    webpack可以处理不同类型的模块。除js外,还能处理less,css,jade,coffeeScript等。原理是通过Loader来适配各种非js资源,将它们(除图片资源外)全都转换成js模块。
    为了解决上面的错误,我们应该在webpack.config.js中module>rules中加上下面的配置规则:并安装file-loader

     {
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'
          }
    

    1、file-loader可以用来帮助webpack打包处理一系列的图片文件;比如:.png 、 .jpg 、.jepg等格式的图片;
    2、file-loader打包图片的结果:使用file-loader打包的图片会给每张图片都生成一个随机的hash值作为图片的名字;
    安装file-loader

    npm install --save-dev file-loader
    

    用法默认情况下,生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

    import img from './file.png'
    

    安装完成后 package.json中就有了file-loader这个node_modules
    webpack.config.js

    module.exports = {
    module: {
    rules: [
    {
    test: /\.(png|jpg|gif)$/,
    use: [
    {
    loader: 'file-loader',
    options: {}
    }
    ]
    }
    ]
    }}
    

    生成文件 file.png,输出到输出目录并返回 public URL。
    “/public/path/0dcbbaa7013869e351f.png”
    修改完成后项目就不会再报错了
    在这里插入图片描述
    参考链接:
    https://www.jianshu.com/p/d18980a6d779
    https://blog.csdn.net/qq1377399077/article/details/87694167
    file-loader中文文档:
    http://doc.codingdict.com/webpack-cn-doc/loaders/file-loader/Webpack打包工具:
    https://www.jianshu.com/p/e57e694643d1使用vue组件搭建网页并打包发布: https://blog.csdn.net/weixin_44423832/article/details/88735421
    iview官网:
    https://www.iviewui.com/docs/guide/start
    在这里插入图片描述

    展开全文
  • vue init webpack-simple这样的方式适合小项目,vue init webpack这样的方式适合中大型项目; 两种方式初始化Vue-Cli的项目的目录差别比较大,你可以发现使用vue init webpack这样的方式来初始化项目,默认提供了很...

    vue init webpack-simple这样的方式适合小项目,vue init webpack这样的方式适合中大型项目;

    两种方式初始化Vue-Cli的项目的目录差别比较大,你可以发现使用vue init webpack这样的方式来初始化项目,默认提供了很多的webpack的配置,也更加的方便你对代理(跨域)、最终打包资源放到服务器什么目录、以及js、css、img和项目在打包过程等优化的配置等等。

    vue init webpack-simple的项目默认打包后之后一个html和一个js文件,而vue init webpack项目默认打包完之后,会有很标准的目录。

    vue基于webpack 模板的目录结构以及目录作用的解析:

    https://blog.csdn.net/qq_34645412/article/details/78818245

    展开全文
  • 下载安装node node官网注:建议下载长期支持版 查看node及npm版本 node -v npm -v ...安装@vue/cli-init ...npm i -g @vue/cli npm i -g @vue/cli-init ...vue初始化基于webpack的my-...vue init webpack my-project ...

    下载安装node

    node官网 注: 建议下载长期支持版

    查看node及npm版本

    node -v
    npm -v
    

    安装 @vue/cli-init

    npm i -g @vue/cli
    npm i -g @vue/cli-init
    

     vue初始化基于webpack的my-project项目(项目名不能用大写字母)

    vue init webpack my-project
    
    ? Project name my-project
    ? Project description A Vue.js project
    ? Author uplyw <xxx@xxx.com>
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? No
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
    

    å®è£é项

    1.项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。 

    Project name (my-project): 

    2.项目描述,如果不需要就直接回车

    Project description (A Vue.js project):
    

    3.项目作者,默认计算机用户名

    Author (xxx):
    

    4.构建方式(暂且这么解释

    两个选择(上下箭头选择,回车即为选定)建议选择 : Runtime + Compiler:recommended for most users
    这里推荐使用1选项,适合大多数用户的

    vue build (Use arrow keys)
    // 1. (译:运行+编译:被推荐给大多数用户)
    > Runtime + Compiler:recommended for most users
    
    // 2.(译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。
    //	VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求)
    > Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY 
    allowed in .vue files-render functions are required elsewhere
    

    5.安装vue的路由插件,需要就选y,否则就n

    建议 : Y

    install vue-router?
    

    6.是否使用ESLint检测你的代码?

    ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
    建议选择 ‘N’ 因为选择 ‘Y’ 在做调试项目时,控制台会有很多 黄色警告 提示格式不规范,但其实并不影响项目

    Use ESLint to lint your code?
    

    7.是否安装单元测试(暂不详细介绍)

    建议 : N

     8.是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)

    建议 : N 

    Setup e2e tests with Nightwatch(Y/n)?
    

     9.项目创建后是否要为你运行“npm install”?这里选择包管理工具

    选项有三个(上下箭头选择,回车即为选定)建议 : yes use npm

    Should we run 'npm install' for you after the project has been created?
    
    // 使用npm
    yes,use npm
    
    // 使用yarn
    yes,use yarn
    
    // 自己操作
    no,I will handle that myself
    

     

    展开全文
  • 1. vue init webpackwebpack项目本身就有一个css-loader,不需要重新去下一个css-loader,只需要下载一个style-loader即可(npm install style-loader --save-dev),之后在你的项目里打开webpack.base.conf.js...

        1. vue init webpack:

    webpack项目本身就有一个css-loader,不需要重新去下一个css-loader,只需要下载一个style-loader即可(npm install style-loader --save-dev),之后在你的项目里打开webpack.base.conf.js文件中,在module的rules那里,加入关于css规则的代码:

    {
        test:/\.css$/,
        loader: 'style-loader!css-loader'
    }

    然后在App.vue文件中在style标签写入你想要引入的样式<style src="aaaa.css" lang="css"></style>

     

    2. vue init webpack-simple

    webpack-simple为简化版,所有的需要手动导入。

    需要先npm install css-loader style-loader --save-dev,下载完后要在webpack.config.js的rules中加入css规则的代码:

    {
        test:/\.css$/,
        loader: ['style-loader', 'css-loader']
    }

    直接通过  import './assets/abc.css'

    展开全文
  • vue init webpack-simple 项目名称 使用于小型项目为简介版的 轻量级 vue init webpack 项目名称 配置很详细 适用于大型项目 重量级
  • 用法:vue init webpack app 2.产生目录如图 3.目录说明 build及config:webpack配置相关 node_modules:通过npm install安装的依赖代码库 src:项目源码 static:存放静态资源 .babelrc:babel相关配置(因为...
  • 使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: ...
  • vue init webpackvue项目报错

    千次阅读 2018-03-30 10:48:09
    使用vue init webpack 创建vue项目时报如下错误:vue init webpack my-projectC:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60let template = program.args[0]^^^SyntaxError: Block-...
  • 前端,解决使用cmd命令输入vue init webpack vueDemo报错 根据上面的提示输入npm install -g @vue/cli-init 然后再输入命令vue init webpack 项目名
  • 使用命令”vue init webpack 项目名称”出错 vue init webpack todolist 你会收到如下反馈: Command vue init requires a global addon to be installed. Please run npm install -g @vue/cli-init and try again....
  • 1、概念:CLI(Command-Line Interface),命令行界面,俗称脚手架。...使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。2、环境安装(需要node、webpack的环境支撑):cnpm install -g @vue/cli ...
  • vue cli 由于某种原因官方的方式“vue init webpack my-project”不再工作了 请使用vue-init webpack my-project
  • Vue webpack模板

    2020-11-28 00:32:54
    vue init webpack demon 然后第一个选项选择第一个,其他选择no 安装vue-router npm install vue-router --save-dev 安装element-ui npm i element-ui -S 安装sass加载器 npm install sass-loader node-sass --...
  • vue init webpack报错解决

    千次阅读 2017-12-25 08:54:12
    1,使用vue init webpack创建Vue项目脚手架报错bogon:~ Brave$ vue init webpack test /usr/local/lib/node_modules/vue-cli/bin/vue-init:60 let template = program.args[0] ^^^SyntaxError: Block-scoped ...
  • Current existing ChromeDriver binary is unavailable, proceding with download and extraction. Downloading from file: ...Saving to file: C:\Users\wangmm69\AppData\Local\Temp\2.46\chromedri.
  • Vue init webpack demo

    千次阅读 2019-05-14 19:50:05
    安装命令为:npm install -g cnpm --registry=...接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架 命令为:cnpm install -g vue-cli 输入:vue init webpack my-vue(项目文件夹名),回车, ...
  • vue init webpack vuedemo02 接着就会让你输入或者选择一些是不是要的东西 ? Project name vuedemo02(项目名称) ? Project description A Vue.js project(描述,我默认了) ? Author simalinjia(作者名称) ? Vue ...
  • vue init webpack 报错 vue不是内部命令

    千次阅读 2019-08-01 14:37:06
    vue脚手架入坑 如果正常来说你安装了node.js 和 npm 环境也配置好后那么搭建vue的...vue init webpack demo(这个是项目名) npm install (初始化这里会自动下载node_modules) 然后就可以执行运行命令了npm run d...
  • Vue Webpack

    2018-05-22 14:38:45
    目的:建立开发、测试、部署的自动化环境 脚手架 vue-cli vue-cli 的存在将项目环境的初始化工作和复杂度降到了最低 # 更新NPM ...init 从指定模板中生成新项目 list 罗列出所有可用的官方模板 ...
  • vue init webpack vuetify-test vuetify-test:项目所在的文件夹 随后的选项选择默认操作即可 eslint 默认开启以后格式检查会比较严格. ? Project name vuetify-test ? Project description A Vue.js project ? ...
  • vue init webpack报错

    2018-04-27 12:55:22
    在最新使用vue init webpack创建一个工程的时候出现下面的错误 错误截图 **原因: **vue-cli版本问题 解决方法: 将自己电脑上的vue-cli包先卸载掉 npm uninstall vue-cli -g 然后再重新安装下vue-cli npm install ...
  • 用法:vue init webpack my-project 产生目录: 目录说明: build及config:webpack配置相关 node_modules:通过npm install安装的依赖代码库 src:项目源码 static:存放静态资源 .babelrc:babel相关配置(因为我们...
  • 报错vue-cli . failed to download repo vuejs-template/webpack connect ETIMEDOUT 13.250.177....vue init webpack-simple mytest 报错vue-cli . failed to download repo vuejs-template/webpack-simple conne...
  • vue init webpack项目速度很慢

    千次阅读 2020-07-03 12:27:13
    vue init webpack项目速度慢 前提是有cnpm(cnpm -v查看版本,检查是否安装了) 在初始化项目之前先cnpm install webpack利用国内镜像下载好依赖 再用vue init webpack projectname 初始化
  • ** 搭建Vue webpack开发环境 ** 安装全局vue-cli脚手架 npm install -g vue-cli 全局安装webpack npm install webpack -g 创建一个基于webpack模板...vue init webpack myproject 安装项目依赖 npm install 进...
  • vue init webpack mydemo
  • vue init webpack vuedemo1 报错 D:\MyWorkSpace\vue_project>vue init webpack vuedemo1 ? Project name vuedemo1 ? Project description A Vue.js project ? Author rk ? Vue build standalone ? Install vue-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,499
精华内容 2,599
关键字:

initvuewebpack

vue 订阅