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 文件夹放到服务器就行了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli入门之项目结构分析

    vue-cli入门之项目结构分析

    前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli项目,那么接下来,我们来梳理一下vue-cli项目的结构. 总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 文件结构细分 1.build--[webpack配置] build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npm run dev首先启动的就是

  • 详解Vue使用 vue-cli 搭建项目

    详解Vue使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli  一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功.  二.安装 vue-cli 安装好了 node,我们可以直接全局安装 vue-

  • Vue使用vue-cli创建项目

    Vue使用vue-cli创建项目

    本文介绍了Vue使用vue-cli创建项目,分享给大家,具体如下: vue-cli 是一个官方发布vueJS项目脚手架:https://github.com/vuejs/vue-cli 我创建的模板项目:https://github.com/Aleczhang1992/my-vue-project/tree/dev 一.步骤 1.要求已安装Node.js (>=4.x, 6.x preferred) and Git. 可以设置cnpm可以提升依赖包下载速度: npm install -g cnp

  • 详解vue-cli 构建Vue项目遇到的坑

    前言 使用Vue做管理系统和WebApp做过三四个项目了,期间遇到很多坑,再次一一列举,并给出解决方案,方便日后更方便使用,也为他人提供一些解决方案. 问题表象和解决方案 1.编译后js.css等相对路径和绝对路径. config/inde.js文件 build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirnam

  • 详解Vue-cli 创建的项目如何跨域请求

    详解Vue-cli 创建的项目如何跨域请求

    问题描述: 使用 Vue-cli 创建的项目,开发地址是 localhost:8023,需要访问 localhost:9000 上的接口 分析原因: 不同域名之间的访问,需要跨域才能正确请求.跨域的方法很多,通常都需要后台配置 不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,实现跨域请求 解决方案: 接口地址原本为 /form/save,但是为了匹配代理地址,在前面加一个 /api 如果使用了 axios,可以全局配置一个 baseURL,这样就不用挨个儿修改 url

  • vue-cli如何快速构建vue项目

    vue-cli如何快速构建vue项目

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.安装vue-cli 使用npm全局安装vue-cli(前提是已经安装了nodejs,否则连npm都用不了) $ npm install -g vue-cli 2.创建自己的工作空间 $ vue init webpack vuetest 3.项目信息 命令输入后,会进入安装阶段,需要用户输入一些信息 Project name (vuetest) 项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字

  • 深入理解Vue-cli搭建项目后的目录结构探秘

    我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言 这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html

  • vue cli实现项目登陆页面流程详解

    vue cli实现项目登陆页面流程详解

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使

  • Vue Cli 3项目使用融云IM实现聊天功能的方法

    介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程:sdk使用介绍 过一遍教程,接下来开始写 二.引入融云IM 如图: 位置:public/index.html,引入 <script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script> 三.可以正常使用

  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • vue2.0实战之基础入门（1）

    vue2.0实战之基础入门（1）

    最近公司的H5项目准备重构,部门老大说前端使用vue2.0来开发,所以就准备把整个项目的开发过程记录下来,一方面是为了记录开发过程中遇到的坑,另一方面也加强自己写作的能力. 什么是 Vue? 简要介绍一下vue,vue就是一个前端框架,特点是 数据双向绑定,比如说改变input输入框里的内容,就会自动同步更新到页面上绑定该输入框的组件的值. 看一下官方对vue的介绍: Vue.js,读音 /vjuː/,和view发音几乎一样,可见重心是在视图(view)层上的.Vue.js 的目标是通过尽可能简

  • vue脚手架搭建项目的兼容性配置详解

    使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js第一行引入 import 'babel-polyfill' 安装引入成功之后,如果项目还不能正常运行 则需要安装babel进行解析 (推荐阮一峰老师的文章https://www.jb51.net/article/

  • 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 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    vue-cli 3.0 正式版于 8月10号发布,但是3.0 与 2.0 版本在搭建项目时到底有何不同呢?下面做一下简单的介绍,希望可以帮到有需要的朋友 1. 全局安装vu-cli 3.0  npm install -g @vue/cli  (如果之前安装了2.0版本,先卸载 npm uninstall -g vue-cli ) ; 安装完 3.0 后,有以下两种创建项目的方式: a . 指令: vue create < project-name> ;然后会出现默认和手动两个选项,跟着步骤走就

  • Vue CLI3搭建的项目中路径相关问题的解决

    这是开头 最近在试水 Vue CLI 3,并且尝试配置一个多页面(多应用)项目出来,期间又遇到各种路径问题,于是...于是有了下面的唠叨. 以下都是基于 Vue CLI 3 来举例说明的,使用 2.x 版本的其实也类似 首先,参考 官方文档对静态资源处理的说明,并通过自己的实践,可以总结出以下内容 静态资源可以通过两种方式进行处理: 1.以下情况下,资源不会被 webpack 处理,而是被直接拷贝: 放置在 public 目录下,即使未被使用. 通过绝对路径被引用,即以 / 开头的路径. 2.以

  • vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项   -d

随机推荐