精华内容
下载资源
问答
  • Vue 教程(三十二)webpack 使用 vue 配置步骤 新建一个项目 vue 安装本地 webpack 初始化 npm 配置 webpack.config.js 文件 npm install webpack@3.6.0 --save-dev 初始化 npm npm init 安装 vue npm install...

    Vue 教程(三十二)webpack 使用 vue 配置步骤

    1. 新建一个项目 vue
    2. 安装本地 webpack
    3. 初始化 npm
    4. 配置 webpack.config.js 文件
    npm install webpack@3.6.0 --save-dev
    
    • 初始化 npm
    npm init
    
    • 安装 vue
    npm install vue@2.5.21 --save
    
    • 配置 webpack.config.js 文件

    在这里插入图片描述

    // 导入Node中path常量
    const path = require("path");
    
    module.exports = {
        entry: "./src/main.js",
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: "bundle.js",
            publicPath: 'dist/'
        },
        resolve: {
            // alias:别名
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        }
    }
    

    main.js 文件:

    在这里插入图片描述

    import Vue from "vue";
    
    const app = new Vue({
      el: "#app",
      data: {
        message: "hello world!",
      },
    });
    

    index.html 页面:

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>vue模块化开发</title>
      </head>
      <body>
        <div id="app">{{message}}</div>
        <script src="../dist/bundle.js"></script>
      </body>
    </html>
    
    • 展示 vue 效果
    npm run build
    
    • 展示 vue 效果

    hello world!

        – 以上为《Vue 教程(三十二)webpack 使用 vue 配置步骤》,如有不当之处请指出,我后续逐步完善更正,大家共同提高。谢谢大家对我的关注。

    ——厚积薄发(yuanxw)

    展开全文
  • Vue devtools工具安装 Chrome安装Vue devtools 一、安装步骤 1、下载地址:GitHub - vuejs/devtools at v5.1.1 2、注意: 必须使用 v5.1.1 版本,经测试这个版本正常使用 3、安装步骤: npm install / cnpm ...

    Vue devtools工具安装 Chrome安装Vue devtools 教程步骤

    一、安装步骤

            1、下载地址:GitHub - vuejs/devtools at v5.1.1

            2、注意: 必须使用 v5.1.1 版本,经测试这个版本正常使用

            3、安装步骤:

    npm install / cnpm install
    
    npm run build

            4、上述步骤,安装没报错后,可以看到会生成 devtools/shell 目录

            5、打开 chrome 浏览器,开启 开发者模式--- 加载已解压的扩展程序 --- 选择 devtools-5.1.1\shells\chrome

    方式一:在谷歌浏览器地址栏中输入:chrome://extensions/
     
    方法二: 右上角 --- 更多工具 --- 扩展程序 

            6、点击插件 "详情" --- 有权访问的网站 --- 在所有网站上

    二、可能遇到的问题

            1、安装报错,请选择 v5.1.1 版本

            2、安装完成后devtool图标还是灰色的或者控制台根本就没有vue:

    
    打开: vue-devtools\shells\chrome中的manifest.json 文件
    
    将"persistent": false 改为 true 。
    

            已安装好的 vue-devtools 插件。

    三、 5.1.1 以后版本安装

            1、比如 v5.3.4版本

    yarn install 
    
    yarn run build

            2、获取到,安装后的内容: devtools-5.3.4\packages\shell-chrome ,后续按照步骤【一-5】操作即可。

            PS:为什么会写这篇文章,作为一个后端开发,初次接触Vue,下载最新的版本(v6.0.x),

    再按照其他博客的教程(npm install),一直安装失败 ...

    最根本的原因是: 我没有看官方的安装文档 !!!

            比如问题: yarn 是干啥的? yarn 和 npm 有啥区别呢? 不知道 !

    展开全文
  • vue项目打包步骤

    万次阅读 多人点赞 2018-06-25 01:04:39
    vue项目打包终端运行命令 npm run build打包成功的标志与...具体步骤如下:1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到in...

    vue项目打包

    一、终端运行命令 npm run build

    二、打包成功的标志与项目的改变,如下图:

    3、点击index.html,通过浏览器运行,出现以下报错,如图:

    四、那么应该如何修改呢?
    具体步骤如下:
    1、查看package.js文件的scripts命令
    2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
    3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
    4、终端运行 npm run build 即可。

    此时点击index.html,通过浏览器运行便,会发现动态绑定的static的图片找不到,故static必须使用绝对路径。将图片路径修改为绝对路径,至此,打包完成。

    五、温馨提示

    更多博文,请关注:xssy5431 【小拾岁月】

    扫码:

     

    展开全文
  • vue 安装步骤

    千次阅读 2018-06-22 14:59:49
    使用淘宝镜像cnpm安装Vue.js前言Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,...步骤首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取...

    使用淘宝镜像cnpm安装Vue.js


    前言

    Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,其中有一种安装方式是使用npm,比较适合比较大型的应用。今天就来看看这种方式如何操作,由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.

    步骤

    首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。 
    1.打开命令行窗口,输入

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 1

    获取到cnpm以后,我们需要升级一下,输入下面的命令

    cnpm install cnpm -g
    • 1

    因为安装Vue需要npm的版本大于3.0.0,所以我们要升级一下,

    然后我们输入下面的命令,安装vue

     cnpm install vue
    • 1

    接下来安装vue-cli

    cnpm install --global vue-cli
    • 1

    此时环境就搭建好了。

    2.接下来我们需要指定一个目录存放我们的项目,可以选择任意路径,确定好路径后输入下面的命令

    vue init webpack "项目名称"
    • 1

    3.成功以后,我们进入项目所在目录

    cd "项目所在文件夹"
    • 1

    然后依次输入下面的命令

    cnpm install 
    cnpm run dev
    • 1
    • 2

    这里写图片描述

    成功后我们进入浏览器,输入localhost:8080会展示下面的页面 
    这里写图片描述

    项目目录

    接下来我们看看上面成功创建的项目,进入项目目录 
    这里写图片描述

    我们开发的目录是在src,src中包含下面的目录 
    这里写图片描述

    • assets:存放突变
    • components:存放一个组件文件
    • App.vue:项目入口文件,我们也可以直接将组建写这里,而不使用 components 目录
    • main.js:项目核心文件

    • 我们看看App.vue的内容
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app'
    }
    </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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    Hello.vue

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>Essential Links</h2>
        <ul>
          <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
          <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
          <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
          <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
          <br>
          <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
        </ul>
        <h2>Ecosystem</h2>
        <ul>
          <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
          <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
          <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
          <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'hello',
      data () {
        return {
          msg: 'Welcome to 菜鸟教程'
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    
    ul {
      list-style-type: none;
      padding: 0;
    }
    
    li {
      display: inline-block;
      margin: 0 10px;
    }
    
    a {
      color: #42b983;
    }
    </style>


    此文复制链接:http://blog.csdn.net/Small_Lee/article/details/68062223

    参考网址:http://www.runoob.com/vue2/vue-install.html

    展开全文
  • Vue安装步骤教程(详细)

    千次阅读 2019-12-13 15:26:37
    这个项目的目录和结果(如果是第一次创建vue项目的话 没有node_modules这个依赖包,没有的话安装一下依赖就好了命令是: cnpm install ),我不是第一次创建vue项目所以node_modules会有的, 安装完成后,要去看...
  • 使用idea开发vue初始步骤

    千次阅读 2020-12-09 17:08:56
    idea开发vue初始步骤
  • Vue构建项目 1、环境搭建 1.1、npm安装 下载nodejs并安装 按照提示进行安装操作,直至完成。 打开命令程序输入: node -v 如上图则为安装成功。 使用淘宝npm镜像 npm install -g cnpm --registry=...
  • vue.js安装步骤教程

    2020-07-11 17:38:59
    vue安装步骤教程地址:https://blog.csdn.net/weixin_43844158/article/details/89788002
  • 新建一个vue步骤

    2020-08-03 10:11:27
    创建vue工程步骤:具体步骤和注意事项参考 https://www.cnblogs.com/yanxulan/p/8978732.html(大佬的解决步骤) 一、前期步骤 1、安装node环境(自己百度) 2、检查是否安装成功 node -v npm -v 3、下载淘宝镜像...
  • 搭建vue项目步骤详解

    2020-07-24 15:07:33
    搭建vue项目步骤详解 第一步:搭建node.js环境 下载安装node.js,一路下一步就行,如果中途出现错误信息为2503或2502的一般情况下是因为权限不足。(下载地址为:https://nodejs.org/en/) 检查是否安装成功:如果...
  • Vue 教程1

    千次阅读 2018-09-18 14:37:48
    最近在学习vue的过程中发现网上的vue教程总有些不同的问题,有的教程上来只说语法,有的教程上来就用vue-cli来建项目,但是vue-cli是整合了webpack等多个插件的工具,不利于我们学习原理。我觉得一个好的教程应该...
  • vue-cli构建vue项目步骤

    2017-07-23 11:00:58
    前言:vue-cli 是vue官方提供的脚手架工具,优势:成熟的vue项目架构设计、本地测试服务器、集成...步骤:  1.npm install vue-cli -g  全局安装vue-cli;    2.vue init webpack my_project  初始化vue项目,
  • idea 创建vue项目步骤

    2020-11-29 16:54:38
    跟着图片来,有命令或者代码我单独提出来 创建一个 Static Web 项目 ...# 创建的就是vue项目,vue这个必须加 Npm install vue Npm install ztree Npm install jquery 下载模板代码: Nmp install 框架
  • vue.js安装步骤教程连接
  • 搭建vue项目步骤

    2019-08-14 12:16:18
    1,安装node.js 安装地址 ...3,安装vue-cli脚手架 npm install -g vue-cli 或者淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 4,创建项目 npm init webpack first (项目名) 5...
  • Vue创建项目步骤

    万次阅读 多人点赞 2019-09-23 10:24:30
    Vue框架使用vue简介MVVM的介绍vue项目步骤vue项目目录详解运行vue可以自动打开浏览器如何使用less写样式 vue简介 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,087
精华内容 3,234
关键字:

vue教程步骤

vue 订阅