使用vue-cli创建项目的图文教程(新手入门篇)

本文是针对对于完全没有了解过vue 和npm，连运行环境和项目构建的都不会的小白，对于前端老司机的就不用看了，浪费时间。

使用npm 与vue-cli 构建vue 项目

第一步：安装运行环境（node与npm）

nodeJ官网：http://nodejs.cn/下载安装包( 安装)

安装完成后，需要检测是否安装成功

使用命令行cmd 打开dos 黑窗口，运行 node -v 和 npm –v，出现版号说明安装成功

注（npm 是node自带的，在安装node时已经安装了）

如何升级npm 的版本呢？很简单

执行命令：npm i –g to update （全局安装：建议） 或者npm install –g npm

第二步：安装脚架手 vue-clic

安装vue-cli 有两种安装途径(npm 与 cnpm)，二选一

(1) 使用npm 安装vue-cli,全局安装 （该方式安装比较慢，国外镜像）

运行：npm install g vue –cli

(2) 使用cnpm ( 国内淘宝镜像)安装vue-cli

（2.1） 首先要注册cnpm

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

　　

　　(2.2) 检测 cnpm 是否安装成功，出现版本说明安装成功

　　运行：cnpm -v

　　

　　（2.3）使用cnpm 安装脚架手vue-cli

　　运行：cnpm install –g vue-cli

　　使用 vue –V（注意：大写V）查看是否安装成功

　　运行：vue –V

　　

第三步 ：正式开始创建项目

　　1.使用 命令：cd目录路径 ，进入到你指定的创建项目的路径下

　　如：

　　

　　2. 使用 vue init webpack 初始化项目

　　运行：vue init webpack myfilst-vueproject(自定义文件目录名称)

　　一般默认，直接回车就可以了

　　

　　在目前为止，已创建好一个vue 的项目，目录结构如：（结构详解看官网）

　　

　　3.按照提示运行流程，在当前项目的目录下安装模块

　　运行: cd 项目名称

　　运行： npm install

　　

　　 正在安装模块依赖。。。。

　　模块安装完成，项目根目录下多一个文件夹

　　

　第四步：启动/运行项目

　运行：npm run dev

　成功运行,默认效果如：

　　

　　　　如果没有显示正常的页面，看是否端口是否被占用，默认运行端口为8080，

　　项目根目录下 ->config->index.js

　　

　　　　修改该端口值，重新运行：npm run dev

　　每次修改配置文件都要重新运行

第五步：打包上线

　　运行：npm run build

　　　打包完成后，会在根目录下生成一个dis 的文件夹，可以在本地打开浏览，项目上线时，只需将dis 文件夹放在服务器即可

总结

以上所述是小编给大家介绍的使用vue-cli创建项目的图文教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解在vue-cli项目中使用mockjs(请求数据删除数据)

    详解在vue-cli项目中使用mockjs(请求数据删除数据)

    在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已. 搭建一个vue项目 # 全局安装 vue-cli $ npm install --global vue-

  • vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

    最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程. 至于vue-resource的安装和json的准备我就不赘述了... 下面是操作方法: 1.首先介绍一下项目的结构:将本地的json文件放在最外层和index.html在一起,姑且叫做data.json. 我的json数据文件大概如此: { "seller": { "name": "粥品香坊(回龙观

  • 详解vue-cli 脚手架项目-package.json

    使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在package.json里. { "name": "vue-manage", // 项目名称 "version": "1.0.0", // 版本 "description": "Reimbursement Man

  • 用Vue-cli搭建的项目中引入css报错的原因分析

    用Vue-cli搭建的项目中引入css报错的原因分析

    我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧! 1.问题描述 之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vue)引入自己的css文件(假如你的文件是在src目录下),都会报一个相同的错.下如图 经过一番折腾之后发现需要在build文件下的webpack.base.conf.js中加上下面的代码即可 { test: /\.css$/, includ

  • 详解vue-cli快速构建项目以及引入bootstrap、jq

    详解vue-cli快速构建项目以及引入bootstrap、jq

    vue-cli脚手架工具快速构建项目架构: ..首先默认了有已经安装了node... npm install -g vue-cli                   全局安装vue-cli vue init webpack cnm                  生成项目名为cnm的的项目模板,cnm自定义 npm install                                   到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖 此时文件夹目录应该是这样 然后

  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init

  • Vue-cli创建项目从单页面到多页面的方法

    Vue-cli创建项目从单页面到多页面的方法

    对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm install glob --save-dev 2.修改build下的文件 (1)修改webpack.base.conf.js 添加以下代码: var glob = require('glob'): var entries = getEntry('./src/pages/**/*.js') 将module.exports中的 entry:

  • 深入理解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 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间. 使用npm 与vue-cli 构建vue 项目 第一步:安装运行环境(node与npm) nodeJ官网:http://nodejs.cn/下载安装包( 安装) 安装完成后,需要检测是否安装成功 使用命令行cmd 打开dos 黑窗口,运行 node -v 和 npm –v,出现版号说明安装成功 注(npm 是node自带的,在安装node时已经安装了) 如何升级npm 的版本

  • Springboot创建项目的图文教程（idea版本）

    原文地址:http://www.javayihao.top/detail/84 一:概述 由于springboot项目,不管是java工程还是web工程都可以直接以jar方式运行,所以推荐创建jar工程,这里创建jar工程项目为例. 二:两种方式创建springboot项目 1.第一种方式 手动在idea中new一个新的项目.选择maven工程 完成的结构如图 然后在pom文件继承spring-boot-starter-parent依赖接口完成创建 <?xml version="1.0&q

  • vue项目的创建的步骤(图文教程)

    vue项目的创建的步骤(图文教程)

    安装npm 1.检查node,未安装在这里下载最新版安装.2.检查npm,node自带npm但不是最新版本,需要命令更新:npm install -g npm 安装vue脚手架 1.在国内下载时网络会出问题,建议淘宝镜像下载,配置镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org2.用cnpm安装vue脚手架:cnpm i -g @vue/cli(其中i是Install安装的简写,g是global全局的简写). 创建

  • 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

  • Visual Studio 2019配置vue项目的图文教程详解

    一,环境安装 1:Vue项目一切基于Node.js,必须先安装NodeJS, 下载地址:https://nodejs.org/zh-cn/ 安装nodejs,一路next就行了 Additonal工具可以不用安装. win+r 输入cmd 输入 node -v 和 npm -v 得到版本信息证明装好了. 2:确认Visual Studio 2019环境:看扩展工具里有没有勾选NodeJs 二,使用VS2019 创建Vue项目 后期会新增多个vue的项目,所以建议加一个vue名称 方案管理文件 你

  • Intellij IDEA创建spring-boot项目的图文教程

    Intellij IDEA创建spring-boot项目的图文教程

    开发环境: jdk版本:JDK8 maven版本:maven-3.5.2 开发工具:Itellij IDEA 2017.1 前提条件:已安装以上软件并配置好jdk和maven的环境变量 创建步骤: 点击坐上角file --->选择new --->点击project... 如下图所示: 点击左边Spring Initializr ---> 右上角新建jdk(若有则不需要) ---> 点击next 如下图所示: 看需求修改下图中的信息后点击next(可以直接使用默认) 点击左边的Web

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

  • 在IDEA中配置tomcat并创建tomcat项目的图文教程

    上篇文章给大家介绍了在idea中将创建的java web项目部署到Tomcat中的过程图文详解,可以参考下,本文给大家继续介绍如何在IDEA中配置tomcat并创建tomcat项目. 如何配置? 1.菜单栏中的Run - Edit Configurations 2.Templates - Tomcat Server - Local - 点击Configure选择Tomcat所在的文件夹(端口号不改)-点击OK 如何创建? New - Moudle - Java Enterprise - 勾选We

  • 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> 三.可以正常使用

  • Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下

随机推荐