vue环境搭建

以你之姓@ 2023-07-03 12:20 14阅读 0赞

必要的开发环境  
工欲善其事必先利其器！在开始写代码之前，请确保你已经安装了必要的开发环境和工具，以下是几个必需的和可选的工具：

1）node.js  
现在，前端工具链基本都依赖Node.js，所以请率先安装它吧。  
下载地址：https://nodejs.org/en/download/  
安装完成后，打开你的命令行输入如下命令，验证安装是否成功：  
node –version  
//成功的话输出类似：v10.6.0  
npm --version  
//成功的话输出类似：6.1.0  
然后，我们需要执行以下命令，将npm的下载源切换到国内淘宝的镜像，以提高下载时的速度和成功率：  
npm set registry https://registry.npm.taobao.org/  
vue-cli  
vue-cli是一个vue专用的项目脚手架工具，可以用于方便的创建vue项目骨架代码，包括我们要讲到的mpvue的项目代码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli，在命令行输入如下命令：

npm install vue-cli -g  
安装完成后，输入如下命令进行验证：

vue

// 成功的话会输出如下内容：  
// Usage: vue \[options\]  
//  
// Options:  
//  
// -V, --version output the version number  
// -h, --help output usage information  
//  
// Commands:  
//  
// init generate a new project from a template  
// list list available official templates  
// build prototype a new project  
// create (for v3 warning only)  
// help \[cmd\] display help for \[cmd\]

新建项目mydemo  
vue init webpack mydemo  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70]

## 修改路径 ##

config / index.js

build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',       //修改这个  加个 小点儿
    
        /**
         * Source Maps
         */
    
        productionSourceMap: true,
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',
    
        // 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
      }

build / utils.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70 1]

publicPath:"../../"

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200206193521701.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200722142432881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ==,size_16,color_FFFFFF,t_70