学习VUE先安装node配置文档

win7nodejs下载

win7版本vue。node-v10.2.0-x64.rar-其它文档类资源-CSDN下载

win8 win10 nodejs下载 新版本

win8+_node-v14.15.3-x64+配置-WindowsServer文档类资源-CSDN下载

安装nodejs后

1验证安装是否成功
cmd
node -v
npm -v
2nodejs安装文件夹内创建node_cache和node_global
#输入命令
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
#查看默认全局模块存放路径
npm list -g
3.1设置[NODE_HOME]
D:\Program Files\nodejs
3.2设置[Path]
删除用户变量中【Path】变量的值：【C:\User\用户名\AppData\Roaming\npm】
删除系统变量中【Path】变量的值：【D:\Program Files\nodejs】
%NODE_HOME%;%NODE_HOME%\node_global
3.3设置[NODE_PATH]
在高级系统设置-->环境变量-->系统变量中新建变量【NODE_PATH】
%NODE_HOME%\node_global\node_modules
4配置淘宝为国内镜像源
#设置为淘宝源地址
npm config set registry https://registry.npm.taobao.org
#查看是否设置成功
npm config get registry
#安装cnpm命令（只有安装才能使用cnpm命令）
npm install -g cnpm --registry=https://registry.npm.taobao.org
--added 843 packages in 69.937s等等
#查看版本
cnpm -v
5测试
#-g是全局安装的意识
npm install express -g
或
cnpm install express -g
6常用命令
#清理缓存
npm cache clean --force
#查看默认全局模块存放位置
npm list -g
#查看源地址
cnpm config get registry

使用npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev]
使用npm卸载插件：npm uninstall <name> [-g] [--save-dev] PS:不要直接删除本地插件包
使用npm更新插件：npm update <name> [-g] [--save-dev]
更新全部插件：npm update [--save-dev]
查看npm帮助：npm help
查看当前目录已安装插件：npm list

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

7vue
#安装vue
npm install vue -g
#安装vue-cli
npm install vue-cli -g
#查看是否安装成功
vue -v

8新建一个vue项目

cmd：npm install vue-cli -g(下载全局vue-cli)

cmd：vue init webpack antdv_web  （项目名是antdv_web）

? Project name antdv_web        (回车enter)
? Project description A Vue.js project         (回车enter)
? Author liuyouxian <373220666@qq.com>        (回车enter)
? Vue build standalone        (回车enter)
? Install vue-router? Yes        (Yes)    

? Use ESLint to lint your code? No        使用ESLint语法  (建议n)         
? Set up unit tests No               (建议n) 
? Setup e2e tests with Nightwatch? No        (建议n) 
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself               

(选择> Yes, use NPM)

项目就建好了

继续cmd： cd antdv_web        进入到项目中

继续cmd： npm install         初始化安装依赖
继续cmd： npm run dev  执行
打开浏览地址栏输入http://localhost:8080        回车

                                        V

Welcome to Your Vue.js App

等等

完成

9webstorm中运行vue项目。
打开webstrom—>open—>选择项目—>新窗口打开。

 ok

 开启成功

10 Ant Design of Vue
npm install ant-design-vue --save
#这个报错 安装下面的

npm install follow-redirects

打开src下main.js在import router ...下面填写

import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";//引入Antd的css
Vue.use(Antd);

打开src下App.vue在<div id="app">里面填写

 <a-input placeholder="Basic usage" style="width: 200px"/>
    <a-button type="primary">按钮</a-button>

开启服务

继续大展宏图吧 学习地址

Ant Design VueAn enterprise-class UI components based on Ant Design and Vuehttps://www.antdv.com/docs/vue/getting-started-cn/