从零开始搭建vue

您所在的位置:网站首页 查看vue-cli版本 从零开始搭建vue

从零开始搭建vue

#从零开始搭建vue| 来源: 网络整理| 查看: 265

从零开始搭建vue-cli脚手架_超详细步骤 龙行    web前端    2019-2-21    4977    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

播放m3u8|mp4

播放m3u8|mp4

jQuery手风琴菜单(改造版)

jQuery手风琴菜单(改造版)

jquery实现左侧伸缩菜单

jquery实现左侧伸缩菜单

分享一个jq的省市区三级联动源码

分享一个jq的省市区三级联动源码

点击搜索框获取焦点 placeholder消失-开始

点击搜索框获取焦点 placeholder消失-开始

JS实现显示当前时间

JS实现显示当前时间

一个基于jQuery的table插件bcgrid

一个基于jQuery的table插件bcgrid

TP5+layui excel导入

TP5+layui excel导入



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3