Vue项目搭建步骤

一. 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

二. 安装额外的依赖包
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

三. 其他修改
3.1 开发环境的端口修改
修改/config/index.js

3.2 打包静态文件夹名称修改
修改/config/index.js

3.3 index.html文件自动注入代码压缩配置
修改/build/wepack.prod.config.js

3.4 .vue文件严格模式配置
修改/build/wepack.base.config.js

四. 参考链接
vue-cli安装: https://cn.vuejs.org/v2/guide/installation.html
npm换源: http://www.jianshu.com/p/0deb70e6f395
webpack配置: https://webpack.js.org/configuration/
axios文档: https://github.com/mzabriskie/axios
vue-router文档: https://router.vuejs.org/zh-cn/
vuex文档: https://vuex.vuejs.org/zh-cn/
element-ui文档: http://element.eleme.io/#/zh-CN/component/quickstart
mint-ui文档: http://mint-ui.github.io/docs/#!/zh-cn2
ssh2文档: https://github.com/mscdex/ssh2
ssh2方法封装: http://blog.csdn.net/llmys/article/details/52860816?locationNum=2&fps=1
js-cookie文档: https://github.com/js-cookie/js-cookie

参考至  http://blog.csdn.net/echo008/article/details/77099058

时间: 2024-11-13 04:10:32

Vue项目搭建步骤的相关文章

vue项目搭建+路由使用

vue脚手架搭建步骤: 1. 全局安装 vue-cli2. npm install --global vue-cli3. 创建一个基于 webpack 模板的新项目4. vue init webpack // 当前目录5. vue init webpack my-project // 新建目录6. 安装依赖,走你7. cd my-project8. npm install9. npm run dev 路由使用: 重要文件(package.json.main.js.router\index.js.

vue项目搭建

VUE项目搭建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev

vue项目搭建 (一)

vue项目搭建 (一) 由于一直想要有自己的框架,因而一直在尝试搭建各类结构,结合vue官网及git上大神bailicangdu的项目,再看看网上一些意见,及个人思考,总结的一些,不到之处希望大家可以帮我指证,必定虚心接受 技术栈: vue2+vue-router+vuex+axios+webpack+es6/7 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── apsi | | ├── api

如何搭建一个vue项目(完整步骤)

参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了. 检查是否安装成功: 二.搭建vue项目环境 1

Vue框架(三)——Vue项目搭建和案例

Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli 注:2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤 npm cache clean --f

vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目的请求生命周期 三.vue项目中的功能 1. 路由相关的标签和方法 2. 路由配置 (1)无路由传参的路由配置方法 (2)路由传参的路由配置方法 3. 页面的跳转功能 (1)标签跳转 (2)逻辑跳转(路由跳转) 四.JS原型 五.vue组件生命周期钩子 六.vue的ajax插件:axios 七.vu

vue 项目搭建

cli 方式安装      集成了内置webpack 模块 安装步骤   1.全局安装 vue-cli $ npm install --global vue-cli 2. 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 3.安装依赖,走你 $ cd my-project $ npm install $ npm run dev 如果npm安装慢的话 可以使用淘宝镜像 npm install -g cnpm --registry=https:/

requirejs + vue 项目搭建

以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界.所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑.当然在用的时候也有一些小坑和bug,都处理了.今年正美正好升级avalon2.0,加入虚拟dom的时候,不稳定了,就考试寻找其他的mvvm框架. 看了比较流行的一些框架,最后选择了vue.选择他的原因是 文档比较全,而且还有中文的(你懂的),生态圈比较好,有vux, vue-loader, vue-router ,组件化设计的也很好.

vue项目搭建笔记

安装nodejs后, 首先安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 淘宝镜像安装成功后,安装vue脚手架:cnpm install vue-cli -g 参考地址:https://www.cnblogs.com/dreling/p/6892684.html vue项目demo:https://segmentfault.com/p/1210000008583242/read?from=timeline