龙行博客

走路看风景,经历看人生,岁月留痕迹,人生留轨迹,17的历史,18的豪情,时间的匆忙,人生的风景,放开心胸往前走,成功再远行,放开理想往前走,梦想再行动。
现在位置:首页 > 编程语言 > web前端 > 从零开始搭建vue-cli脚手架_超详细步骤

从零开始搭建vue-cli脚手架_超详细步骤

龙行    web前端    2019-2-21    69    0评论    本文已被百度收录点击查看详情

都说vue2简单易上手,挣扎过一段时间没去研究(原因吗嘛:主要是觉得对于我这种前端菜鸡,有点难)

挣扎了一两周,这里翻翻,那里看看,google,百度,官网, -----  一不小心零零碎碎的还来了兴趣(想研究的东西只要来了兴趣,事半功倍);

学习使我开心(哈哈)

之前也看了看vue基础,没想想中那么难,入门像我这种菜鸡大概一天左右吧. 发现vue的官方文档还是不错的,由浅到深,如果不使用构建工具用着确实挺爽,但是实际项目中这是很难的 . 但是当你用vue-cli构建的时候,官方文档根本不够用,需要熟练掌握ES6, webpack的配置又让你感到心如刀割难受啊

当用vue-cli构建一个工程的时候,发现官方文档还是不够用,需要熟练掌握es6,而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)还是都要上的。

vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成

安装vue-cli之前请先确认你安装了node.js,版本一般都是8.0以上

node官方网站

node

如上:根据自己环境安装即可;

node -v 查看node版本
npm -v 查看npm版本

国内很多人用cnpm 淘宝镜像,也可以速度快 : 

这是淘宝镜像网址:  https://npm.taobao.org/

安装方法:

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm版本  :  如下图 我的版本是6.1的

    cnpm -v

cnpm

接下来安装webpack

npm install webpack-cli -g
如下图:

webpack

同样的可以  webpack -v 查看版本号

然后安装vue-cli脚手架

安装方法:全局安装,随便一个文件夹,输入命令行:

npm install vue-cli -g
等待安装就成 查看版本号 vue -V(注意是大写)

通过vue-cli初始化项目

以上几步环境和脚手架都建好了,接下来初始化vue项目(哪个文件位置都行)

vue init webpack vuetest(项目名) 
  //此命令表示基于webpack初始化一个项目此文件生成你当前文件目录

注意:项目名只能小写不能有中文

执行安装后有选项,如下根据自己选择就行

$ vue init webpack vuetext1--------------------- 安装vue-cli,初始化vue项目的命令

? Target directory exists. Continue? (Y/n) y---------------------找到了vuetext1这个目录是否要继续

? Target directory exists. Continue? Yes

? Project name (vuetext1)---------------------项目的名称(默认是文件夹的名称),ps:项目的名称不能有大写,不能有中文,否则会报错

? Project name vuetext1

? Project description (A Vue.js project)---------------------项目描述,可以自己写

? Project description A Vue.js project

? Author (OBKoro1)---------------------项目创建者

? Author OBKoro1

? Vue build (Use arrow keys)--------------------选择打包方式,有两种方式(runtime和standalone),使用默认即可

? Vue build standalone

? Install vue-router? (Y/n) y--------------------是否安装路由,一般都要安装

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则,这里个人建议选no,因为经常会各种代码报错,新手还是不安装好

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vuetext1".

To get started:)--------------------如何开始

cd vuetext1)--------------------进入你安装的项目

npm install)--------------------安装项目依赖

npm run dev)--------------------运行项目

Documentation can be found at https://vuejs-templates.github.io/webpack)--------------------vue-cli官方文档

vue-cli

现在vue项目已经初始化完成,但是还不能运行,进入你的项目里面打开cmd或者bash
前面安装的时候已经生成了package.json文件

执行npm install 安装所需依赖  否则项目是不能正常运行的

run

注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用,当有其他vue项目运行的时候,可以使用ctrl+c来中断运行。

运行后默认打开浏览器如下安装成功

run

评论一下 分享本文 赞助站长

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/170.html
  • 上篇文章:vue 表单v-model数据双向绑定,vue继续爬
  • 下篇文章:VUE学习之页面渲染数据
  • js jquery vue
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
快捷导航
联系博主
在线壁纸
给我留言
光羽影视
音乐欣赏
返回顶部