如何用vue-cli3创建项目(vue-cli 3.8.4)

本文详细介绍了如何使用Vue CLI 3.8.4版本从零开始创建一个Vue项目,包括安装Vue CLI、创建项目、运行开发服务器、打包部署等步骤,并提供了配置打包后资源路径的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如何用vue-cli3创建项目(vue-cli 3.8.4) 

Step1 安装vue-cli:
    cnpm install -g @vue/cli


 Step2 查看vue-cli版本:
    vue -V


  Step3 用vue-cli快速创建一个项目:
    vue create vuex
    (now I use the default setting)


  Step4 开发运行:
    npm run serve


  Step5 打包:
    npm run build


  Step6 发现打包后的index.html中引入的js和css资源的路径不对,需要配置 ,配置方法:
    1.在项目根目录下创建文件vue.config.js
    2.vue.config.js文件内容如下:
      // - - - start - - -
      module.exports = {
        publicPath: './'
      }
      // - - - end - - -
    3.重新打包,则发现问题已解决

0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'E:\\web_study\\node\\nodejs\\node.exe', 1 verbose cli 'E:\\web_study\\node\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build' 1 verbose cli ] 2 info using npm@6.14.5 3 info using node@v14.5.0 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle vue-antd-jeecg@3.4.3~prebuild: vue-antd-jeecg@3.4.3 6 info lifecycle vue-antd-jeecg@3.4.3~build: vue-antd-jeecg@3.4.3 7 verbose lifecycle vue-antd-jeecg@3.4.3~build: unsafe-perm in lifecycle true 8 verbose lifecycle vue-antd-jeecg@3.4.3~build: PATH: E:\web_study\node\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\java-study-item\jeecgboot-vue2\ant-design-vue-jeecg\node_modules\.bin;E:\Software\MySQL\mysql-8.0.26-winx64\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;E:\web_study\node\nodejs;E:\Git\Git-install\Git\cmd;E:\linux\tools\xshell\;E:\linux\tools\xftp\;E:\Developer\Developer_tools\java\jdk1.8.0_211\bin;C:\Users\SHUAIGE\AppData\Local\Microsoft\WindowsApps;E:\web_study\html\cvcode\Microsoft VS Code\bin;E:\maven\apache-maven-3.8.4\bin;E:\Software\idea\Installation package\IntelliJ IDEA 2020.3.1\bin;;C:\Users\SHUAIGE\AppData\Roaming\npm;E:\web_study\node\nodejs;D:\软件下载\bandizip\ 9 verbose lifecycle vue-antd-jeecg@3.4.3~build: CWD: E:\java-study-item\jeecgboot-vue2\ant-design-vue-jeecg 10 silly lifecycle vue-antd-jeecg@3.4.3~build: Args: [ '/d /s /c', 'vue-cli-service build' ] 11 silly lifecycle vue-antd-jeecg@3.4.3~build: Returned: code: 1 signal: null 12 info lifecycle vue-antd-jeecg@3.4.3~build: Failed to exec build script 13 verbose stack Error: vue-antd-jeecg@3.4.3 build: `vue-cli-service build` 13
03-31
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值