• 快速创建一个vue 项目


    首先查找本机是否安装node  使用node -v  进行检查出现版本号即安装了

    再检查本是否安装 npm 使用npm -v 进行检查,出现版本号即安装好了

    安装vue-cli  使用npm install -g vue-cli  命令进行安装

    安装好这一步,在创建一个项目 vue init  webpack my-project,这一步要一系列的y或者n进行对项目的一些简单配置

    进入项目中使用cd my-project 进入项目

    再npm install 一下

    然后在npm run dev 或者npm start运行项目

    如果项目要打包上线使用命令npm run build 进行对项目的打包,这个时候你直接打开dist/下的index.html,会发现文件可以打开,但是所有的js,css,img等路径有问题是指向根目录的,

       此时需要修改config/index.js里的assetsPublicPath的字段,初始项目是/他是指向项目根目录的也是为什么会出现错误,这时改为./

    • / 根目录
    • 根目录:在计算机的文件系统中,根目录逻辑驱动器的最上一级目录,它是相对子目录来说的;
          它如同一棵大树的“根”一般,所有的树杈以它为起点,故被命名为根目录。以微软公司开发的Windows操作系统为例:
          打开我的计算机(计算机),双击C盘就进入C盘的根目录。双击D盘就进入D盘的根目录
    复制代码
     build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
      }
    复制代码
    • 在从dist根目录打开index文件就可以访问了。
  • 相关阅读:
    【HDOJ】2102 A计划
    this关键字
    static(静态、修饰符)
    手势抽取过程&代码复用
    Android:padding和android:layout_margin的区别
    平移动画
    读取系统联系人
    获取sim卡序列号
    图片选择器
    md5加密过程
  • 原文地址:https://www.cnblogs.com/yh886/p/9380127.html
Copyright © 2020-2023  润新知