文档章节

3.08-搭建VUE项目(使用vue-cli构建工具)

静以修身2025
 静以修身2025
发布于 05/15 10:51
字数 595
阅读 6
收藏 0

1、安装vue-cli

    1.1、安装npm

①命令行输入:npm -v    判断是否已经安装(出现版本号则已安装)

②未安装需要下载node软件包,下载地址: http://nodejs.cn/download/

③换源: npm config set registry https://registry.npm.taobao.org

④查看配置:npm config list

    1.2、全局安装webpack

①命令行:npm install -g webpack   或者    npm install webpack -g

②安装完成后输入:webpack -v    出现版本号即安装成功

    1.3、全局安装vue-cli

①命令行:npm install vue-cli -g    或者    npm install --global vue-cli

②安装后输入:vue -V(大写)    出现版本号即安装成功

③打开:C:\Users\Andminster(用户)\AppData\Roaming\npm,出现有下图所示

④打开node_modules 也可以看到vue-cli文件夹

2、搭建vue-cli项目

①、打开命令行(若使用idea,打开Terminal窗口输入命令),切换到要搭建项目的地址

②、输入命令:vue init webpack project-name

③、接下来会出现如下几个提示

  • Project name                                                         --项目名称
  • Project description                                                                                                        -- 项目描述
  • Author                                                                                                                           -- 作者
  • Vue build                                                                                                                       -- 构建模式,一般默认standalone
  • Install vue-router                                                                                                           -- 是否安装vue的路由插件
  • Use ESLint to lint your code                                                                                          -- 是否用ESLint限制代码错误和风格
  • Set up unit tests                                                                                                            -- 是否安装单位测试
  • Setup e2e tests with Nightwatch                                                                                  -- 是否安装e2e来进行用户行为模拟测试
  • Should we run "npm install" for you after the project has been created                     -- yes,选择使用npm,no后续自选择

④、进入项目目录下输入命令:npm install

⑤、执行项目命令:npm run dev

3、整合Element-UI

① 命令行输入:npm i element-ui -S

② 在main.js引入:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

4、 引入echarts

安装: npm i echarts -S

5、引入js-cookie工具

npm install js-cookie --save

6、mavonEditor-基于Vue的markdown编辑器插件

npm install mavon-editor --save

7、vue使用scss

npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install style-loader --save-dev

8、Vu实现导出Excel表格功能

npm install -S file-saver 用来生成文件的web应用程序

npm install -S xlsx 电子表格格式的解析器

npm install -D script-loader 将js挂在在全局下

9、数字滚动插件

npm install vue-count-to

10、VUEX 

npm install vuex --save

11、screenfull.js 实现全屏功能

 npm install --save screenfull

© 著作权归作者所有

静以修身2025
粉丝 2
博文 68
码字总数 21293
作品 0
淮南
程序员
私信 提问
Vue-cli 脚手架的安装与使用(详细说明)

1.1.1.1 安装Node.js 无疑Node.js是前端编程的必备环境配置之一。 安装过程非常简单,与平时安装的一般软件无异。 官方网站:https://nodejs.org/en/ Node.js自带npm包管理工具,使用npm可使...

weir_will
2018/04/05
0
0
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

阿K1225
2018/05/22
0
0
Vue命令行工具vue-cli

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可...

韦姣敏
2018/06/23
0
0
使用vue-cli(vue脚手架)快速搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝...

四小七
2018/05/09
0
0
Vue-cli@3.0 插件系统简析

Vue-cli@3.0 是一个全新的 Vue 项目脚手架。不同于 1.x/2.x 基于模板的脚手架,Vue-cli@3.0 采用了一套基于插件的架构,它将部分核心功能收敛至 CLI 内部,同时对开发者暴露可拓展的 API 以供...

滴滴WebApp架构组
2018/09/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 请务必让我分担他们的痛苦!

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @clouddyy :分享石元丈晴的单曲《Why》: 《Why》- 石元丈晴 手机党少年们想听歌,请使劲儿戳(这里) @一代码哥 :当他妈狗屁的程序员,天天...

小小编辑
29分钟前
74
4
php 遇到 No input file specified的解决方法

(一)IIS Noinput file specified 方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二: 请修改php.ini 找到 ; cgi.force_redirect = 1 去掉前面分号,把后面的1...

chenhongjiang
今天
7
0
MySQL 基础

一、常用命令 在命令行中,配置好环境变量后,通过cmd可以直接进入mysql命令行模式,同时列举几种常用命令 # 进入mysql数据库,密码可以先不写,打完-p后再输入,防止被别人看到mysql -u账...

华山猛男
今天
6
0
简单的博客系统(四)Django请求HTML页面视图信息--基于函数的视图

1. 编写用于查询数据的功能函数 应用目录 下的 views.py 文件通常用于保存响应各种请求的函数或类 from django.shortcuts import renderfrom .models import BlogArticles# Create your ...

ZeroBit
今天
5
0
用脚本将本地照片库批量导入到Day One中

因为目前iCloud 空间已经不足,其中95%都是照片,之前入手了DayOne,且空间没有限制,订阅费一年也不少,再加上DayOne作为一款日记App 也比较有名,功能方面最大的就是地理视图与照片视图,尤...

在山的那边
昨天
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部