环境搭建及配置
官网地址:https://nodejs.org/zh-cn/
安装node,为msi文件直接点击安装即可,安装的node已经包含了 npm ,并且默认的安装已经加入到了环境变量中.
校验安装是否成功
//校验node
node -v
//检测npm
npm -v
设置缓存和全局包路径存储位置,默认的是存放到 c 盘 便于管理
//全局安装包存放路径
npm config set prefix=E:\Applications\node\node_global
//缓存相关的文件
npm config set cache cache=E:\Applications\node\node_cache
校验设置的路径是否正确
//全局安装 -g代表全局
npm install -g vue
//当前目录安装,直接安装到当前的目录下
npm install vue
//当对应的设置目录查看即可
Vue项目的初始化
//安装 vue-cli 脚手架工具
npm install -g vue-cli
//初始化项目
vue init webpack helloworld
//执行该命令之后,需要输入或选择相关的信息
项目名称
项目描述
项目作者
编译选项
安装路由
语法检测
检测规范
单元测试
使用包管理
...
//进入项目目录
cd helloworld
//运行项目
npm run dev
//查看项目
默认为 http://localhost:8080
Tips:: 安装vue之后不能直接使用vue命令,需要配置vue环境变量,vue的安装位置为 上面设置全局包存放路径。
项目目录介绍:
build //打包相关的配置
build.ja
check-version.js
logo.png
utils.js
vue-loader.conf.js //
webpack.base.conf.js //基础webpack配置
webpack.dev.conf.js //开发配置
webpack.prod.conf.js //线上配置
config //项目配置文件
dev.env.js //开发环境配置信息
index.js //基础信息配置信息
prod.env.js //线上环境配置信息
src //项 目的源代码
assets //项目资源 图片等
components //项目组件
router //项目路由
App.vue //项目原始根组件
main.js //项目的入口文件
node_modules //项目依赖的三方包
static //静态资源
.babelrc //vue是单文件组件,对vue做些语法转换,便于浏览器识别,配置
.editorconfig //编辑器的一些语法
.eslintignore //那些文件不会受到 eslint的检测
.eslintrc.js //项目语法检测配置
.postcssrc.js //postcss配置项
index.html //默认首页模版文件
package.json //项目依赖相关
package-lock.json //确定安装库的具体信息