从零开始搭建vue |
您所在的位置:网站首页 › 查看vue-cli版本 › 从零开始搭建vue |
从零开始搭建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 -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
接下来安装webpack npm install webpack-cli -g 如下图:
同样的可以 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官方文档
执行npm install 安装所需依赖 否则项目是不能正常运行的
注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用,当有其他vue项目运行的时候,可以使用ctrl+c来中断运行。 运行后默认打开浏览器如下安装成功
![]() 播放m3u8|mp4 jQuery手风琴菜单(改造版) jquery实现左侧伸缩菜单 分享一个jq的省市区三级联动源码 点击搜索框获取焦点 placeholder消失-开始 JS实现显示当前时间 一个基于jQuery的table插件bcgrid TP5+layui excel导入 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |