首页 > 其他分享 >如何从零开发Vue,vue环境安装。

如何从零开发Vue,vue环境安装。

时间:2022-10-30 10:38:06浏览次数:80  
标签:node npm Vue cnpm nodejs vue 安装


1. 首先去官网下载 安装包

​https://nodejs.org/en/​

如何从零开发Vue,vue环境安装。_系统变量

2. 安装下载包。直接下一步下一步就行了

我这里安装在了D 盘     D:\Program Files\nodejs 这个目录

3.进入安装目录创建两个文件夹: 在nodejs安装路径下,新建node_global和node_cache两个文件夹

目录树为:

如何从零开发Vue,vue环境安装。_安装包_02

4. 

设置缓存文件夹

npm config set cache "D:\Program Files\nodejs\node_cache"

 设置全局模块存放路径

npm config set prefix "D:\Program Files\nodejs\node_global"

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

 

5 。基于 Node.js 安装cnpm(淘宝镜像)

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

如何从零开发Vue,vue环境安装。_vue入门_03

6.设置环境变量(非常重要)

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

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

2、修改系统变量PATH

 

     新增系统变量NODE_PATH

 

如何从零开发Vue,vue环境安装。_环境变量_04

如何从零开发Vue,vue环境安装。_安装包_05

 

7、安装Vue

cnpm install vue -g

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

cnpm install vue-cli -g

如何从零开发Vue,vue环境安装。_环境变量_06

 9、新项目的创建

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

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

根据模版创建新项目

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

vue init webpack-simple mytest

 

如何从零开发Vue,vue环境安装。_环境变量_07

创建后目录结构为:

如何从零开发Vue,vue环境安装。_vue环境搭建_08

 

安装工程依赖模块

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

cd mytest
cnpm install

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

cnpm run dev

如何从零开发Vue,vue环境安装。_安装包_09

 

至此, 哈哈哈  看看浏览器输出吧。

是不是跑起来了。哈哈

如何从零开发Vue,vue环境安装。_安装包_10

标签:node,npm,Vue,cnpm,nodejs,vue,安装
From: https://blog.51cto.com/51souta/5807329

相关文章

  • windows下安装redis服务
    下载地址:Releases·microsoftarchive/redis·GitHubRedis支持32位和64位。这个需要根据你系统平台的实际情况选择,这里我们下载Redis-x64-xxx.zip压缩包到D盘......
  • linux 安装.net 5.0
    目录​​一、环境搭配​​​​二、下载SDK包​​​​ 三、ubuntu安装.net5.0​​ ​​四、创建.net5.0web项目​​ ​​五、发布web​​一、环境搭配首先在官网......
  • Vue3中 响应式 API ( readonly、shallowReadonly、toRaw、markRaw ) 详解
    ​​传送门:Vue3中响应式API(reactive、ref、toRef、toRefs)详解​​传送门:Vue3中响应式API(shallowReactive、shallowRef、triggerRef、customRef)详解1.readonly......
  • 宝塔面板部署vue项目
    一、安装宝塔面板在宝塔面板官网,找到linux安装命令大全 https://www.bt.cn/new/btcode.html ,使用一下命令安装宝塔面板 找到服务器实例为实例建立远程连接,在连接......
  • VueX状态管理
    目录总览:一、VueX概念1.VueX的概念Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可......
  • Vue页面重新加载刷新数据配置
    第一种方式reload一、在根文件app.vue文件中配置//app.vue<template><!--给全局挂载适配元素app--><divid="app"><keep-aliveinclude="DataSet">......
  • 【转】VUE 组件之间的数据共享
              [email protected]                   ......
  • Vue router简单配置入门案例
    { 注意驼峰命名法,不然会报错  }   1.在Views文件夹下创建Vue路由文件,例如:<template></template> <script></script> template:表示html结构区域,scri......
  • 【转】VUE 组件的生命周期
                 ......
  • 【转】Vue Watch 侦听器
    npmiaxios-S         ......