一,环境搭建
1.1下载安装node及npm
1.1.1 官网下载安装next---.
1.1.2 打开cmd窗口(如果在系统盘(c盘)下安装,应以管理员身份打开cmd,否则会报错权限不够)node -v查看版本 (确保完成安装)
1.1.3 设置环境变量
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache"D:\Program Files\nodejs\node_cache"
1.1.4 查看文件夹是否生成
1.1.5 修改环境变量
在系统环境变量添加NODE_PATH,输入路径为:
D:\Program Files\nodejs\node_global
操作如下:我的电脑右击,打开属性->高级系统设置->环境变量->新建(系统变量下)->输入变量名NODE_PATH->变量值:
1.1.6 安装express
输入 npm install express -g
安装成功!
1.2下载cnpm淘宝镜像
1.2.1 输入npm install -g cnpm --registry=https://registry.npm.taobao.org
1.2.2 cnpm -v 检测是否安装成功
二,构建项目
安装好以上内容之后 输入 vue init webpack projectName(项目名称)
三,项目目录结构
|— build # (webpack配置相关)
| |— build-server.js # 运行本地构建服务器,可以访问构建后的页面
| |— build.js # 生产环境构建脚本
| |— dev-client.js # 主要用来实现开发阶段的页面自动刷新(热重载)
| |— dev-server.js # 运行本地开发服务器
| |— utils.js # 构建相关工具方法
| |— webpack.base.conf.js # wabpack基础配置
| |— webpack.dev.conf.js # wabpack开发环境配置
| |— webpack.prod.conf.js # wabpack生产环境配置
|— config # 配置目录,包括端口号等
| |— dev.env.js # 开发环境变量
| |— index.js # 项目配置文件
| |— prod.env.js # 生产环境变量
| |— test.env.js # 测试环境变量
|— node_modules # npm||cnpm install 安装的依赖代码库
|— src # 存放项目源码
| |— assets # 放置一些图片,如logo等
| |— components # 目录里面存放一些公共组件
| |— App.vue # 根组件
| |— main.js # 入口js文件
|— static # 存放静态资源(图片、字体等),不会被wabpack构建
| |— .gitkeep # 当static目录为空文件夹时git也可以提交到代码仓库
|— test # 测试文件目录
|— .babelrc # babe文件的编译配置
| |— presets # 预设转码规则
| |— plugins # 除了预设的,还可以根据自己的需求添加其他转码插件
| |— comments # 转换后代码生不生成注释
|— .editorconfig # 编辑器的配置
| |— charset # 编码
| |— indent_style # 缩进风格
| |— indent_size # 缩进长度
| |— end_of_line # 换行风格
| |— insert_final_newline # 创建一个文件是否自动在文件末尾插入一个新行
| |— trim_trailing_whitespace # 移除文件末尾多余的空行
|— .eslintignore # 忽略语法检查的目录文件
|— .eslintrc.js # eslint的配置文件
|— index.html # 入口页面
|— package.json # npm包配置文件
|— favicon.ico # 网站图标