使用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 条评论
登录 后参与评论

相关文章

来自专栏逻辑熊猫带你玩Python

“聊一聊Linux的工作环境”

由于Linux采用了和Windows不同的文件系统,所以和Windows用户熟悉的文件管理模式不通,这里来简单说说Linux的根("/")目录下目录的用途

822
来自专栏IT米粉

hexo——轻量、简易、高逼格的博客

写blog虽然经历了N多不同时代的产品,恒久不变的始终是自己无人问津的网站。虽然没几个人看,还是隔断时间就要折腾一下。从最开始的wordpress,到tale,...

2922
来自专栏云计算教程系列

如何在Ubuntu 14.04上更改PHP设置

PHP是一种服务器端脚本语言,被许多流行的CMS和博客平台使用,如WordPress和Drupal。它也是流行的LAMP和LEMP堆栈的一部分。在设置基于PHP...

3280
来自专栏小怪聊职场

爬虫|利用Anyproxy爬取微信公众号文章及临时链接转永久链接

1.4K8
来自专栏JetpropelledSnake

Linux学习笔记之Centos6.9安装Python3.6

如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境,

781
来自专栏魏艾斯博客www.vpsss.net

wordpress 前台源代码显示查询次数、加载时间和内存占用的方法

1343
来自专栏电光石火

查询局域网电脑的IP,MAC地址

如何在自己电脑端查看局域网中所有用户计算机的IP和MAC地址呢?有时为了局域网管理的需要,可以需要批量获取局域网电脑的IP和MAC地址。以下就与大家分享一下...

3526
来自专栏前端那些事

nvm管理不同版本的node和npm

写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你需要快速更新node版本,并且不覆盖之前的版本;或者想要在不同的...

2808
来自专栏运维前线

使用Gitlab创建git项目

使用Gitlab创建git项目 登录gitlab系统,访问自己的gitlab.example.com,然后使用gitlab用户,登录 ? 第一次登录需要重新修改...

8528
来自专栏容器云生态

Ansible基本配置以及使用示例

##Ansible基本使用以及模块详解 准备条件:注意:前提是ansible已经正常安装,并且可以使用 1.在ansible主机上创建ssh公私钥对 ansib...

2349

扫码关注云+社区

领取腾讯云代金券