环境搭建及配置

官网地址: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   //确定安装库的具体信息