前端开发环境前期准备工作,该过程只需操作一次(除非更新版本)
1,安装node环境
下载并安装node环境:下载安装包 https://nodejs.org/en/download
cmd命令窗口输入node -v或npm -v,如果出现版本号说明安装成功
为了提高安装速度,可以使用淘宝镜像 https://npm.taobao.org
cmd命令窗口输入npm install -g cnpm --registry=https://registry.npm.taobao.org
cmd命令窗口输入cnpm -v,检查是否安装成功
2,安装vue项目环境
全局安装vue-cli:cmd窗口输入npm install -g vue-cli
进入项目目录,创建一个新项目:cmd命令窗口输入vue init webpack 项目名
进入项目:cmd窗口输入cd anhave,安装依赖:cmd窗口输入npm install
启动项目:cmd窗口输入npm start
项目目录结构
build // webpack相关配置
-- build.js // 生产环境构建脚本
-- check-versions.js // 检查npm,node.js版本
-- utils.js // 构建相关工具方法
-- vue-loader.conf.js // 配置了css加载器以及编译css之后自动添加前缀
-- webpack.base.conf.js // webpack基本配置
-- webpack.dev.conf.js // webpack开发环境配置
-- webpack.prod.conf.js // webpack生产环境配置
config // 项目配置
-- dev.env.js // 开发环境变量
-- index.js // 项目配置文件
-- prod.env.js // 生产环境变量
node_modules // npm加载的项目依赖模块
src // 这里是我们要开发的目录,基本上要做的事情都在这个目录里
-- assets // 资源目录,放置一些图片或者公共js、css,这里的资源会被webpack构建
-- components // 组件目录,我们写的组件就放在这个目录里面
-- router // 前端路由,我们需要配置的路由路径写在index.js里面
-- App.vue // 根组件
-- main.js // 入口js文件
static // 静态资源目录,如图片、字体等,不会被webpack构建
.babelrc // babel参数
.editorconfig // 代码格式
.gitignore // git上传相关配置
.postcssrc.js // css相关工具
index.html // 首页入口文件,可以添加一些 meta 信息等
package.json // npm包配置文件,定义了项目的npm脚本,依赖包等信息
README.md // 项目的说明文档,markdown 格式