当前位置: 首页 > 编程笔记 >

vue2.0实战之使用vue-cli搭建项目(2)

松灿
2023-03-14
本文向大家介绍vue2.0实战之使用vue-cli搭建项目(2),包括了vue2.0实战之使用vue-cli搭建项目(2)的使用技巧和注意事项,需要的朋友参考一下

Vue-cli是官方推荐的快速构建单页应用的脚手架。官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack、npm、nodejs等等,很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的(官方构建建议)。一下是构建过程。

一、 安装 node.js

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

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

二、安装 vue-cli

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

npm install -g vue-cli

因为各种不可描述的原因,使用npm安装会很慢,而且很容易出错,所以推荐使用cnpm来安装。

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

安装成功后,使用 cnpm 安装 vue-cli 和 webpack。

cnpm install -g vue-cli

安装完成后,可以使用vue -V 查看是否安装成功。

三、生成项目

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

vue init webpack Vue-demo

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

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

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

cnpm install

然后启动项目

npm run dev

四、打包上线

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

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

npm run build

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍详解Vue使用 vue-cli 搭建项目,包括了详解Vue使用 vue-cli 搭建项目的使用技巧和注意事项,需要的朋友参考一下 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli  一、 安装 node.js 首先需要安装node环境,可以直

  • 本节是完成商城网站前台结构搭建,并且将网站首页,商品列表和详情页的界面摆放到web项目中 由于三个网页界面都有公共的页头和页脚,故采用模板继承来实现网页布局: (1). 开发前的准备工作: 安装项目设计创建对象的文件和目录 将素材下的提前准备好模板目录中的静态资源目录:css、fonts、img、js 复制到项目的static/web/目录下。 (2). 目urls路由信息配置: from dja

  • 本文向大家介绍详解如何使用vue-cli脚手架搭建Vue.js项目,包括了详解如何使用vue-cli脚手架搭建Vue.js项目的使用技巧和注意事项,需要的朋友参考一下 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: 后面分步说明。 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本。npm版本 > 3.x 全局安装vue-cli 3. 使用

  • 本文向大家介绍webpack4+Vue搭建自己的Vue-cli项目过程分享,包括了webpack4+Vue搭建自己的Vue-cli项目过程分享的使用技巧和注意事项,需要的朋友参考一下 前言 对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛 最近在看webpack4,深感知识浅薄,这两天也一直在思考cli的配置,借助一些别人的实践,尝试自己搭建vue的项目,这里使用w

  • 本文向大家介绍使用Vue CLI创建typescript项目的方法,包括了使用Vue CLI创建typescript项目的方法的使用技巧和注意事项,需要的朋友参考一下 使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 创建项目 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我

  • 本文向大家介绍使用vue cli4.x搭建vue项目的过程详解,包括了使用vue cli4.x搭建vue项目的过程详解的使用技巧和注意事项,需要的朋友参考一下 cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1、创建项目 vue create vuetest   2、选择配置方式 这里我选择的是手动配置(使用↑ ↓箭头切换,Enter

  • 本文向大家介绍vue项目实战总结篇,包括了vue项目实战总结篇的使用技巧和注意事项,需要的朋友参考一下 这篇文章把小编前段时间做的vue项目,做个完整的总结,具体内容请参考本文。 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署。 废话不多说了。干货直接上。 一、 必须node环境, 这次就不写node环境的安装了。过两天我会写个node环境的安装随笔。 二、 node环境配好后。开整v

  • 本文向大家介绍vue-router项目实战总结篇,包括了vue-router项目实战总结篇的使用技巧和注意事项,需要的朋友参考一下 今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router。作为我们前后端分离很重要的实践之一,router帮我们完成了SPA应用间的页面跳转。 并且,配合axios这样的第三方库,我们可以实现配合后台接口的拦截器功能。