资讯专栏INFORMATION COLUMN

vue.cli脚手架初次使用图文教程

ccj659 / 2667人阅读

摘要:作用作为的脚手架,可以帮助我们在实际开发中自动生成的模板工程。

vue-cli作用

vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程。

vue-cli使用

!!前提:需要vue和webpack

安装全局vue-cli

npm install vue-cli -g

初始化,生成项目模板(my_project是项目名,自己随意)

vue init webpack my_project

进入生成的项目文件夹

cd my_project

初始化,安装依赖

npm install

安装完成,目录树:

run:

npm run dev

浏览器会自动打开到http://localhost:8080/#/ ,会看到欢迎页:

上面是在本地运行,服务器上运行:

npm run build

生成静态文件:

打开dist文件夹下新生成的index.html文件,会发现页面空白,打开控制台会发现页面中引用的css和js文件都找不到:

说明引用路径错了,需要手动修改:

进入config/index.js

原配置中的引用路径是’/’(根目录):

修改为’./’(当前目录):

run:

npm run build

Done:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82839.html

相关文章

  • 手挽手带你学VUE:四档 Vue-cli3 Vuex Vue-router

    摘要:安装过后到命令行执行检查版本,如果弹出版本的话恭喜你安装成功,我们开始进行下面的步骤了。全局安装的包名称由改成了。如果你已经全局安装了旧版本的或,你需要先通过卸载它。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。 视频教程 由于思否不支持视频外链,视频请移步http://www.henrongyi.top 你能学到什么 在这一期的学习进度中,我们会开始学习在我们工作开...

    Sourcelink 评论0 收藏0
  • 手挽手带你学VUE:四档 Vue-cli3 Vuex Vue-router

    摘要:安装过后到命令行执行检查版本,如果弹出版本的话恭喜你安装成功,我们开始进行下面的步骤了。全局安装的包名称由改成了。如果你已经全局安装了旧版本的或,你需要先通过卸载它。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。 视频教程 由于思否不支持视频外链,视频请移步http://www.henrongyi.top 你能学到什么 在这一期的学习进度中,我们会开始学习在我们工作开...

    AlphaWallet 评论0 收藏0
  • Vue项目环境搭建教程

    摘要:项目环境搭建教程针对开发工具等一下载和下载链接中文官网下载好之后使用命令行再次确认查看顺便看看内置的版本如果是非安装包形式,安装的直接解压的,不是程序安装的形式,需要配置环境变量,必要时还需要配置要使用的版本出 ...

    darkbaby123 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<