快速创建一个vue 项目

Posted 2020-12-25 yh886

首先查找本机是否安装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文件就可以访问了。