当前位置: 首页 > news >正文

安装vue-cli2.0并创建项目

文章目录

  • 1 安装node
  • 2 安装vue-cli
  • 3 创建基于webpack模板的项目
  • 4 项目结构

1 安装node

  • 之前写的博客中介绍了如何安装:NodeJS的安装【windows】。
  • 安装完毕后,可以在命令行中输入node -vnpm -v,若出现版本号,则安装成功。

2 安装vue-cli

  • 输入npm install -g @vue/cli
  • 可能出现的错误:4048错误。
    解决方法:以管理员身份运行命令提示符,然后安装。
  • 输入vue -v,若出现版本号,则安装成功。

3 创建基于webpack模板的项目

  • 转到项目想要创建的文件夹,这里设置的是桌面:cd /d %userprofile%\Desktop
  • 输入vue init webpack todolist
    在这里插入图片描述
    这里可能会出现错误:Command vue init requires a global addon to be installed. Please run npm i -g @vue/cli-init and try again.,按照提示输入npm i -g @vue/cli-init 即可。
  • (若出现上述错误)再次输入 npm i -g @vue/cli-init,然后根据提示依次输入即可。
    在这里插入图片描述
  • 项目创建成功,启动项目:cd todolistnpm run dev
    在这里插入图片描述
  • 项目运行成功。在这里插入图片描述
  • 在浏览器输入localhost:8080可显示该页面。在这里插入图片描述

4 项目结构

  • build:项目的webpack配置文件。
  • config:针对开发环境和线上环境的一些配置文件。
  • node_modules:项目的依赖。
  • src:源代码,src-main.js:整个项目的入口文件。
  • static:静态资源。
    在这里插入图片描述

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 实习项目|苍穹外卖|day2
  • jenkins安装k8s插件发布服务
  • rsync搭建全网备份
  • 实训第三十一天(playbook)
  • vue绑定事件
  • 全局页面数据渲染--SAAS本地化及未来之窗行业应用跨平台架构
  • ssm基于微信小程序的高校课堂教学管理系统论文源码调试讲解
  • 【WiFi主要技术学习2】
  • C++和OpenGL实现3D游戏编程【连载5】——纹理坐标、纹理贴图
  • leecode 31.下一个排列(Golang)
  • 数学基础 -- 线性代数之矩阵因式分解
  • 2024 年的 Web3 游戏:演变、趋势和市场动态
  • 卷积神经网络(CNN):算法、原理与应用
  • Java 如何实现一个简单 RabbitMQ 示例
  • 前端速通面经八股系列(六)—— Vue(下)
  • -------------------- 第二讲-------- 第一节------在此给出链表的基本操作
  • 【跃迁之路】【585天】程序员高效学习方法论探索系列(实验阶段342-2018.09.13)...
  • 2017 年终总结 —— 在路上
  • Angular 4.x 动态创建组件
  • bearychat的java client
  • CentOS7 安装JDK
  • ES6系统学习----从Apollo Client看解构赋值
  • JavaScript学习总结——原型
  • Java读取Properties文件的六种方法
  • java正则表式的使用
  • laravel with 查询列表限制条数
  • Python爬虫--- 1.3 BS4库的解析器
  • React系列之 Redux 架构模式
  • Vue 重置组件到初始状态
  • vue.js框架原理浅析
  • 百度地图API标注+时间轴组件
  • 初识MongoDB分片
  • 分享一个自己写的基于canvas的原生js图片爆炸插件
  • 两列自适应布局方案整理
  • 前端_面试
  • 前端技术周刊 2018-12-10:前端自动化测试
  • 学习笔记TF060:图像语音结合,看图说话
  • 一起参Ember.js讨论、问答社区。
  •  一套莫尔斯电报听写、翻译系统
  • ​卜东波研究员:高观点下的少儿计算思维
  • ​补​充​经​纬​恒​润​一​面​
  • #Ubuntu(修改root信息)
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (回溯) LeetCode 40. 组合总和II
  • (力扣记录)235. 二叉搜索树的最近公共祖先
  • (十三)Java springcloud B2B2C o2o多用户商城 springcloud架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4)...
  • (四)图像的%2线性拉伸
  • (一)、python程序--模拟电脑鼠走迷宫
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • (转) Face-Resources
  • (转)【Hibernate总结系列】使用举例
  • (状压dp)uva 10817 Headmaster's Headache
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • . NET自动找可写目录
  • .bat批处理(六):替换字符串中匹配的子串