Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

转载 2018年04月17日 17:42:50

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli

 

一、 安装 node.js

首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。

只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399

安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

 

二、安装 vue-cli

安装好了 node,我们可以直接全局安装 vue-cli:

npm install -g vue-cli

但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存

同样可以使用 cnpm -v 查看是否安装成功

然后使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

 

三、生成项目

首先需要在命令行中进入到项目目录,然后输入:

vue init webpack Vue-Project

其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹

 

配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install

然后启动项目

npm run dev

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

 

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

四、打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入 npm run build 来进行打包工作

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

 

Vue.js2.0从基础到项目实战 | 利用vue-cli+webpack快速搭建用户管理系统

本套课程分为基础知识和项目实战两部分。基础部分主要使用CDN形式导入Vue.js,Vue.js框架中基本的模板语法,使用CLI搭建项目工程以及Vue.js框架的组件与路由的使用。项目部分实现了vue-cli+webpack搭建的多页面用户管理系统。该项目主要包括注册、登录、改密、退出等功能,以及多页面应用以及客户信息增删改查等实用功能。
  • 2018年04月02日 11:17

vue爬坑——入门坑

vue爬坑——入门坑问题1:父子页面路由模块之间的调用(非数据交互)解1:首先要了解路由的层级,其中index.html为顶级路由,App.vue为二级路由。其次需要知道路由的重定向redirect。...
  • boy599237255
  • boy599237255
  • 2017-11-28 12:37:46
  • 180

实验三(2) SQL查询(排序、集函数和分组子句的应用)

试验目的: 一、学习查询结果的排序 二、学习使用集函数的方法,完成统计 等查询。 三、学习使用分组子句   一、学习查询结果的排序 1、查询全体学生信息,结果按照年龄降 ...
  • jbx929205249
  • jbx929205249
  • 2011-11-15 17:57:59
  • 1231

使用vue cli开发项目中遇到的坑

使用vue cli开发项目中遇到的坑
  • u013032724
  • u013032724
  • 2017-07-24 09:15:27
  • 503

Vue 爬坑之路(五)—— 组件进阶

组件(Component)是 Vue.js 最强大的功能之一,之前的文章都只是用到了基本的封装功能,这次将介绍一些更强大的扩展。   一、基本用法 在使用 vue-cli 创建的项目...
  • bbsyi
  • bbsyi
  • 2017-09-08 18:26:06
  • 282

使用vue-cli构建vue工程,及一些小坑的记录

这篇文章主要记录如何构建一个vue工程,及踩到过的坑 使用vue+webpack+vue-router+vuex+axios+elementUI+jQuery+一些jQuery插件...
  • u011200062
  • u011200062
  • 2017-08-21 17:29:21
  • 272

基于vue-cli的vue项目之路由1--最基本的使用

最基本的vue基于vue-cli的路由
  • HUSHILIN001
  • HUSHILIN001
  • 2017-09-03 23:07:08
  • 451

Vue爬坑之路

1.Vuex与store文档 https://zhuanlan.zhihu.com/p/25042521
  • qq_31540915
  • qq_31540915
  • 2017-09-06 19:33:46
  • 108

Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660...
  • bbsyi
  • bbsyi
  • 2017-09-08 18:25:28
  • 432

vue-cli快速搭建vue项目

1.安装node(使用6+) 2.安装cnpm:安装包时,记得以管理员权限打开cmd 3.安装vue-cli :npm install -g vue-cli 4....
  • qq_34986769
  • qq_34986769
  • 2017-02-08 09:29:43
  • 1694
收藏助手
不良信息举报
您举报文章:Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
举报原因:
原因补充:

(最多只允许输入30个字)