松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › vue.js的开发环境搭建以及开始第一个vue程序

vue.js的开发环境搭建以及开始第一个vue程序

迦娜王
3年前Vue
492 0 0

一、安装node.js(https://nodejs.org/en/)

vue.js的开发环境搭建以及开始第一个vue程序

vue.js的开发环境搭建以及开始第一个vue程序

下载完毕后,可以安装node,建议不要安装在系统盘(如C:)。

vue.js的开发环境搭建以及开始第一个vue程序

vue.js的开发环境搭建以及开始第一个vue程序

二、设置nodejs prefix(全局)和cache(缓存)路径

1、在nodejs安装路径下,新建node_global和node_cache两个文件夹

vue.js的开发环境搭建以及开始第一个vue程序

2、设置缓存文件夹

npm config set cache "D:\vueProject\nodejs\node_cache"

设置全局模块存放路径

npm config set prefix "D:\vueProject\nodejs\node_global"

设置成功后,之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里

三、基于 Node.js 安装cnpm(淘宝镜像)

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

四、设置环境变量

说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径

1、鼠标右键”此电脑”,选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。

2、修改系统变量PATH

vue.js的开发环境搭建以及开始第一个vue程序

vue.js的开发环境搭建以及开始第一个vue程序

3、新增系统变量NODE_PATH

vue.js的开发环境搭建以及开始第一个vue程序

五、安装Vue

cnpm install vue -g
vue.js的开发环境搭建以及开始第一个vue程序

六、安装vue命令行工具,即vue-cli 脚手架

cnpm install vue-cli -g
vue.js的开发环境搭建以及开始第一个vue程序

七、新项目的创建

1.打开存放新建项目的文件夹

打开开始菜单,输入 CMD,或使用快捷键 win R,输入 CMD,敲回车,弹出命令提示符。打开你将要新建的项目目录

vue.js的开发环境搭建以及开始第一个vue程序

2.根据模版创建新项目

在当前目录下输入“vue init webpack-simple 项目名称(使用英文)”。

vue init webpack-simple mytest
vue.js的开发环境搭建以及开始第一个vue程序

初始化完成后的项目目录结构如下:

vue.js的开发环境搭建以及开始第一个vue程序

vue.js的开发环境搭建以及开始第一个vue程序

3、安装工程依赖模块

定位到mytest的工程目录下,安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules

cd mytest
cnpm install

4、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。

cnpm run dev
vue.js的开发环境搭建以及开始第一个vue程序

vue.js的开发环境搭建以及开始第一个vue程序

vue.js的开发环境搭建以及开始第一个vue程序

有什么不理解的,可以在下面留言评论,大家一起探讨一下。

0
Vue PC后台系统组件大全,值得收藏
上一篇
Vue进阶篇-Vue Router官方路由管理器
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top