vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一
2018-12-16 23:21
776 查看
最近自己做了一个vue做前端,nodejs做后的完整项目,在此过程遇到的问题和收获的心得分享出来,希望能和大家交流探讨。
项目搭建步骤
1.首先要确保计算机上安装了nodejs环境,才能进行以下步骤(nodejs环境安装);
2.使用淘宝镜像:npm config set registry http://registry.npm.taobao.org(安装这个是因为我们用的npm的服务器是外国的,有的时候我们安装“依赖”的时候很慢很慢超级慢,所以使用淘宝镜像下载安装速度会快很多,如下图):
3.分别全局vue组件、vue-cli组件、webpack组件:安装命令分别为npm i vue -g、npm i vue-cli -g、npm i webpack -g(-g表示全局安装,-S表示安装到当前项目的模块中),安装分别如下图:
4.至此所需要的安装组件已经全部安装完毕,我在计算机G盘下新建了一个名为Test的项目,所以命令行先进入该目录,如下图:
此时的空项目目录如下图(.idea文件见是我的IDEA编辑器自己的构建文件,和项目无关):
5.用vue-cli脚手架初始化项目,在命令行输入vue init webpack,然后 傻瓜式按回车键一步一步进行操作,如果你项目名称里有大写那进行到 ? Project name这里应该输入小写的项目名再按回车继续如图,
最后边三个选择n(从Use ESLint to lint your code? 开始),最后一项 ? Should we run
npm installfor you after the project has been created? (recommended)选择第三项No, I will handle that myself再按回车,如图 具体操作如下图所示:
至此项目已经自动生成,项目目录如下图:
6.启动本地测试服务器,在命令行依次输入npm i(安装所需要的依赖,执行一次,以后启动不用再执行,直接npm start就行)和npm start,如下图:
至此本地服务器已经启动,在浏览器输入localhost:8080,如下图:
注意:现在你的计算机上已经安装了vue、vuec-cli、webpack,所以以后搭建其他项目只需要从步骤4开始就行。 阅读更多
相关文章推荐
- vue2.0项目笔记系列(1)——搭建Vue脚手架(vue-cli)
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
- 使用vue-cli(vue脚手架)快速搭建项目的方法
- vue-cli webpack 快速搭建项目
- 使用Vue-cli快速搭建项目
- Vue-cli 脚手架搭建 Vue 项目
- Vue-cli脚手架搭建移动端响应式项目及nodejs服务端搭建
- vue-cli 快速搭建脚手架
- vue-cli的使用(快速搭建项目)
- vue脚手架(vue-cli)如何搭建项目
- vue-cli脚手架搭建的项目去除eslint验证的方法
- 基于vue-cli vue-router搭建底部导航栏移动前端项目
- 利用vue-cli脚手架搭建项目时,在我入门时开启了eslint 一直报黄色的警告 有时候非常的烦恼 所以我要去掉它
- 搭建vue项目(基于vue-cli脚手架)
- 使用vue-cli脚手架搭建项目
- vue-cli快速搭建vue项目并上传github
- Vue-cli快速搭建项目
- 使用 vue-cli + element-ui 快速搭建项目
- Vue2项目架构搭建(二)——vue-cli脚手架创建项目
- vue2.0项目快速搭建工具——vue-cli