搭建vue2.0脚手架
搭建vue2.0脚手架
搭建vue脚手架
01
一． vue-cli初始化
1. 全局安装 vue-cli npm install --global vue-cli 2. 创建一个基于 webpack 模板的新项目 vue init webpack my-project 3. 安装依赖 cd my-project npm install (换源安装: npm install --registry https://registry.npm.taobao.org )
npm run dev
02
二、脚手架目录
. ├ build/ # webpack配置文件 │ └ ... ├ config/ │ ├ index.js # 主要项目配置 │ └ ... ├ src/ │ ├ main.js # 应用入口文件 │ ├ App.vue # 主应用程序组件 │ ├ components/ # ui组件 │ │ └ ... │ └ assets/ # 模块资源（由webpack处理） │ └ ... ├ static/ # 纯静态资源（直接复制） ├ test/ │ └ unit/ # 单元测试 │ │ ├ specs/ # 测试spec文件 │ │ ├ index.js # 测试构建条目文件 │ │ └ karma.conf.js # 测试跑步者配置文件 │ └ e2e/ # e2e测试 │ │ ├ specs/ # 测试spec文件 │ │ ├ custom-assertions/ # e2e测试的自定义断言 │ │ ├ runner.js # 测试跑步脚本 │ │ └nightwatch.conf.js # 测试跑步者配置文件 ├ .babelrc # babel 配置 ├ .postcssrc.js # postcss 配置 ├ .eslintrc.js # eslint 配置 ├ .editorconfig # editor 配置 ├ index.html # index.html模板
└ package.json # 构建脚本和依赖关系
build/
此目录包含开发服务器和生产webpack构建的实际配置。 通常，您不需要触摸这些文件，除非您要自定义Webpack加载器，在这种情况下，您应该看看build / webpack.base.conf.js。
config/index.js
这是显示构建设置的一些最常见配置选项的主配置文件。 有关详细信息，请参阅开发期间的API代理和后端框架集成。
src/
这是你的大部分应用程序代码所在的位置。如何构建此目录中的所有内容，主要取决于您; 如果您使用Vuex，您可以查阅Vuex应用程序的建议。
static/
此目录是您不想使用Webpack进行处理的静态资源的一个逃生舱口。 它们将直接复制到生成webpack建立资产的同一个目录中。
有关详细信息，请参阅处理静态资产。
test/unit
包含单元测试相关文件。 有关详细信息，请参阅单元测试
test/e2e
包含e2e测试相关文件。 有关详细信息，请参阅端到端测试。
index.html
这是我们的单页应用程序的模板index.html。 在开发和构建期间，Webpack将生成资产，并将生成的资产的URL自动注入到此模板中以呈现最终的HTML。
package.json
包含所有构建依赖项和构建命令的NPM软件包元文件。
03
三． 安装额外的依赖包 1. 两种依赖包的安装方式 1.1 项目依赖包 npm install --save vue 1.2 开发依赖包 npm install --save-dev webpack 2. less依赖包 npm install --save-dev less less-loader 3. 网络请求axios依赖包 npm install --save axios 4. axios低版本浏览器补丁es6-promise依赖包 npm install --save es6-promise 5. 路由安装 npm install --save vue-router 6. 状态管理安装 npm install --save vuex 7. PC端组件库 npm install --save element-ui 8. 移动端组件库 npm install --save mint-ui 9. 上传服务器ssh2 npm install –save-dev ssh2 10. cookie封装库
npm install --save js-cookie
04
四. 其他修改
4.1 开发环境的端口修改
修改/config/index.js
4.2 打包静态文件夹名称修改
修改/config/index.js
4.3 index.html文件自动注入代码压缩配置
修改/build/wepack.prod.config.js
sdzfgdhg