完整搭建一个vue项目
一. 搭建一个vue项目的完整步骤
1.安装node.js
# 检查是否安装成功
node -v
npm -v
2.为了提高下载效率,可以使用淘宝镜像
# 淘宝镜像
npm install -g cnpm -registry=https://registry.npm.taobao.org
# 检查是否安装成功
cnpm -v
3.安装webpack
打包工具
npm install webpack webpack-cli -g
4.安装vue-cli
脚手架
# 全局安装最新版本
npm install -g @vue/cli
# 检查版本
vue -V
5.创建vue项目
# 命令:
vue create 项目名
# 1. Please pick a preset:
Manually select features
# 2. check the features needed for your project:
Babel Router Linter/Formatter
# 3. Use history mode for router?(Y/n)?
n
# 4. Pick a linter/formatter config:
ESLint with error prevention only
# 5. Pick additional lint features:
Lint on save
# 6. Where do you prefer placing config for Babel,PostCSS,ESLint,etc.?
In package.json
# 7. Save this as a preset for feature projects?(y/N)
y
# 8. Save preset as:
my_vue
注意: 或者直接使用图形化界面创建vue项目
vue ui
然后根据页面提示创建项目.
6.安装axios
# 1. cd到项目目录下
# 2. 执行以下命令
npm install axios --save
7.安装element-ui
# 1. cd到项目目录下
# 2. 执行以下指令
npm i element-ui --save
二. 卸载vue-cli
# 全局安装:
npm install vue-cli -g
# 全局卸载:
npm uninstall vue-cli -g
# 查看vue版本:
vue -V
# 或者:
vue --version
三. 完全卸载webpack
# 在全局下安装:
npm install webpack -g
# 新版本的的webpack需要搭配webpack-cli一起安装:
npm install webpack webpack-cli -g
# 安装指定版本:
npm install webpack@<version> -g
# 例如:
npm install webpack@3.4.1 -g
# 在全局下删除:
npm uninstall webpack -g
完整搭建一个vue项目的更多相关文章
- vue-用Vue-cli从零开始搭建一个Vue项目
Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...
- 如何搭建一个vue项目(完整步骤)
参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的 ...
- 如何搭建一个VUE项目
搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...
- 搭建一个VUE项目
搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...
- 从零开始使用vue-cli搭建一个vue项目及注意事项
一.安装node.js 1.根据电脑的自行下载node.js安装包http://nodejs.cn 2.点击安装,按照正常的的一路点击下去 3.验证安装是否成功,按键win+r,输入cmd打开命令行工 ...
- 如何利用webpack4.0搭建一个vue项目
作为一个初学者,记录自己踩过的坑是个好的习惯.我本身比较懒,这里刚好有时间把自己的搭建过程记录一下这里是参考文章 https://www.jianshu.com/p/1fc5b5151abf文章里 ...
- 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)
注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...
- 用脚手架搭建一个 vue 项目
一.需要安装 node 环境 下载地址: https://nodejs.org/en/ 中文网: http://nodejs.cn/ 安装后为方便国内使用,可以把 npm 换成 taobao 的 cn ...
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
随机推荐
- async 与 await
async 关键字 1.含义:表示函数是一个异步函数,意味着该函数的执行不会阻塞后面代码的执行 2.定义与调用 async function hello (flag) { if (flag) { re ...
- [原创]在Windows平台使用msvc(cl.exe) + vscode编写和调试C/C++代码
1.在.vscode目录下,新建以下几个配置文件,当然也可以通过vscode命令自动生成,如果你已有这些文件直接修改即可. c_cpp_properties.json(代码提示): { "c ...
- CSS基础学习 21.CSS居中总结
注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...
- LVS Nginx和HAproxy的区别,怎么选择最好
LVS Nginx和HAproxy有什么区别呢? LVS:Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统. Nginx:Nginx是一款轻量级的w ...
- C# Transaction 事务处理 -环境事务
一.TransactionScope 环境事务 static async Task TransactionScopeAsync() { using (var scope = new Transacti ...
- <<代码大全>>阅读笔记之二 变量名的力量
1.变量命名的注意事项 1)可理解性 变量要望文知义,看到这个变量不用看其他的代码就知道这个变量表示什么意思 好的变量命:currentDate, heartRate 糟糕的变量名:newButton ...
- 错误调试以及debug的使用
/*定义 .search 搜索*/ $.fn.UiSearch=function(){ var ui=$(this); //任何地方都可以使用断点调试:debugger; //调试时,可以在控制台输入 ...
- B/S大文件分片上传
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- node中的crypto内置模块
crypto模块的目的是为了提供通用的加密和哈希算法.用纯JavaScript代码实现这些功能不是不可能,但速度会非常慢.Nodejs用C/C++实现这些算法后,通过cypto这个模块暴露为JavaS ...
- nginx变量与实列
nginx内置变量 内置变量存放在 ngx_http_core_module 模块中,变量的命名方式和apache 服务器变量是一致的.总而言之,这些变量代表着客户端请求头的内容,例如$http_u ...