专栏首页前端之路使用Vue-cli搭建项目教程

使用Vue-cli搭建项目教程

使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,Github仓库

  1. 安装 Node.js
    • 首先需要安装node环境,可以直接到node官网下载安装包,安装完成后,可以命令行工具中输入 node -v 查看是否成功,不成功清除npm缓存npm cache clean重新安装.
    • 推荐使用国内淘宝镜像安装(cnpm)npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm安装完成后使用cnpm install -g vue-cli安装vue-cli
  2. 生成项目
    • cd进入项目目录 vue init webpack VueProject
    • 配置完成后,可以看到目录下多出了一个项目文件夹cd进入vue.js 项目 cd VueProject
    • 然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖 cnpm install
    • 启动项目 npm run dev
  3. 爬坑日记
    • 如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js ==> build:{assetsPublicPath: './'}
    • 建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ‘ ./ ‘(原本为 ‘ / ‘),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ‘ / ‘ 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。dev:{port: 8075}
    • 部署到github需要留意vue-router是不是使用了 history 模式,去掉即可。(原因是我在 vue-router 里使用了 mode: ‘history’ ,history 模式可以让 url 更像一个链接,然而需要后台做一些设置,page 服务不能做后台设置)
  4. 打包上线部署
    • 项目开发完成之后,可以输入 npm run build 来进行打包工作
    • 打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看
    • 项目上线时,只需要将 dist 文件夹放到服务器就行了。

  • vuex安装到项目 npm install vuex --save

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2.0实现在线商城

    大象无痕
  • –[Hot] Vue-cli 引入VueAwesomeSwiper

    大象无痕
  • –[推荐]Vue-devtools安装

    大象无痕
  • vue.js学习(02)

    今天将vue.js官网的所有看完了,一共15个视频,看完也就差不多一个小时,便将所有vue.js的基本用法都看完了。基本可以满足基础知识的学习。

    efonfighting
  • vue开发环境搭建

    首先,列出来我们需要的东西:  node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 vue的安装 1.vu...

    似水的流年
  • vue开发环境搭建

    首先,列出来我们需要的东西:  node.js环境(npm包管理器) vue-cli 脚手架构建工具

    似水的流年
  • vue脚手架创建项目

    Vue作为现在前端三大框架之一,又是国人开发的,现在已经越来越火。作为最轻量级的一个前端框架,入门简单,今天用脚手架创建一个最简单的应用。

    wade
  • 使用 Cobbler 批量自动化部署 CentOS / Ubuntu

    本文主要讲解通过 CentOS 7.6 Minimal + Cobbler 自动化安装 CentOS / Ubuntu 。

    iMike
  • 时间管理是个"伪命题"吗

    长期以来,时间管理一直被认为是 自我管理,团队管理,项目管理 的既关键又基础的手段,就连笔者本人也一直在崇尚时间管理的理念。 但是这里要讲的,不是什么鬼神方法论...

    美码师
  • 用vue-cli初始化项目带编译器和不带编译器的区别

    从字面意思就可以看出初始化项目过程中,选第一行的话生成的vue项目就是带编译器的,选第二句的话就是不带编译器的,同时它们都是选择的运行时版本。

    挥刀北上

扫码关注云+社区

领取腾讯云代金券