• 使用Webpack搭建Vue项目


    前提:
    1.  借助Node.js环境里的npm来安装,

    2.  设置好npm镜像,

    (比如淘宝的npm镜像:输入 

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


    即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了 ),

    ==============或 者============

    (配置指向源,通过 npm 命令指定下载源)

     
    npm config set registry http://registry.cnpmjs.org



    3.  安装完webpack。 

    npm install webpack -g


    4.  安装完vue脚手架。


    安装脚手架的步骤看这里

    (已经进入项目文件夹的路径 或者是 磁盘根目录)

    开始安装全局vue-cli脚手架,这个工具能帮我们搭建好我们需要的模板框架,比较简单。 

    cnpm install -g vue-cli



    等待下载。

    下载完成后,在命令行中输入vue,验证是否安装成功,如果出来vue的信息说明安装成功



    =======================

    安装完以后,开始创建新项目:会创建新的文件夹

    PS:项目文件夹的名字不能用驼峰命名,要用短横线拼接 

    vue init webpack my-vue(项目文件夹的名字)


    有这个提示的话就等待它下载完成

    选择默认的这个 

    不懂的话可以看这个

    Vue.js 2.0 独立构建和运行时构建的区别 http://www.tuicool.com/articles/3iAfu2n

    创建完成。

    打开文件目录:(使用脚手架搭建的项目文件的结构)

    因为各个模板间都是相互依赖的,所以要安装依赖,

    (已经进入新建的项目文件的路径中。)在命令行输入 

    cnpm install

    ,等待它安装,(可能有点久,可以先看看文件目录)

    安装完以后你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。

    build中配置了webpack的基本配置、开发环境配置、生产环境配置
    config中配置了路径端口值等
    node_modules为依赖的模块
    src放置组件和入口文件
    static放置静态资源文件
    index.html文件入口


    测试一下项目里面默认的app.vue(src目录里)模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入 

    cnpm run dev


    就会自动打开这个页面(地址栏是http://localhost:8080/#/  8080是端口号)

    监听事件


  • 相关阅读:
    1 Java基础知识
    2 Java中常见集合
    请求转发和重定向的区别
    Kafka之工作流程分析
    Kafka之概述
    Kafka之安装
    Oracle数据库查看用户状态
    linux压缩和解压文件命令
    JVM性能调优
    Hbase之命令
  • 原文地址:https://www.cnblogs.com/hiuman/p/7347385.html
Copyright © 2020-2023  润新知