修改NPM全局安装的默认路径(不要轻易操作)
查看当前的全局安装路径
npm config ls
安装指定的目录安装node.js
,例如: c:\nodejs
。
node.js
安装完成之后,需要在 c:\node.js
目录下创建两个文件夹:
c:\nodejs\node_global
c:\nodejs\node_cache
文件夹创建成功后,执行命令:
# 配置默认的全局安装路径
npm config set prefix "c:\nodejs\node_global"
npm config set cache "c:\nodejs\node_cache"# 配置默认的镜像
npm config set registry https://registry.npm.taobao.org
执行成功后,再次运行 npm config ls
查看是否配置成功,如果没有问题,将以下两个目录配置到全局系统变量中:
c:\nodejs
c:\nodejs\node_global
以上步骤执行完成后,可以尝试一下是否能安装到指定的目录,例如:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm
下载完成后,去 c:\nodejs\node_global
目录下查看是否安装成功。
安装Vue-cli脚手架
安装命令:
cnpm i @vue/cli -g
使用脚手架创建项目
先创建管理项目的目录,例如: d:\prject
,目录创建完成后,在该目录下打开命令行工具。
执行:
vue create 项目名
按照以下步骤执行:
第1步:自定义安装还是使用默认安装
第2步:选择安装的模块
第3步:选择Vue的版本,使用2.x
第4步:选择路由模式是否为history模式
第5步:配置文件的类型
第6步:是否将安装流程保存为安装模板
上面步骤执行完成后,依次按回车,会进入下载的步骤。
如果中间没有报错信息,即项目安装成功,然后执行:
# 进入项目
cd myapp# 启动项目
npm run serve
项目启动成功
打开浏览器,在地址栏输入 http://localhost:8080
即可打开项目。
项目结构介绍
- node_modules 依赖管理目录
- public 本地服务器的根目录,用于存放静态文件,例如HTML、css、图片等
- src 源码目录|-- assets 静态资源文件,用于存放图片|-- components 用于管理公共组件的目录|-- router 管理路由的目录|-- store 全局状态管理目录|-- views 视图组件管理目录|-- App.vue 根组件|-- main.js 项目入口文件,用于引入全局依赖或全局配置
- package.json NPM的配置文件
管理路由的目录
|-- store 全局状态管理目录
|-- views 视图组件管理目录
|-- App.vue 根组件
|-- main.js 项目入口文件,用于引入全局依赖或全局配置
- package.json NPM的配置文件