利用Vue-cli搭建Vue项目框架的教程详解

首先安装node.js

1.在新建的目录中按住shift 鼠标右键，在此处打开命令窗口，版本保证在4.x以上

node -v

2.全局安装vue脚手架

npm install -g vue-cli

同时可以使用vue和vue list 命令查看

3.初始化模板配置和项目名字

vue init webpack mycharts

mycharts是项目名

其中有许多需要选择的选项，eslint适合团队开发，规范代码之类的，个人开发我喜欢用stylus，所以这个选项我不会选n，其他Y

4.有提示就按enter，需要输入就输入具体参考这下面这张图

5.进入sell项目目录中

shift + 鼠标右键，进入命令窗口，下载依赖包

npm install

6.启动项目

npm run dev

ico图标制作 https://icomoon.io/app/#/select/font

剩下的就按需加载，安装过程中，有时候，第一次安装会报错，重复安装一次就好

安装 babel-polyfill es6-promise

npm install babel-polyfill es6-promise --save-dev

安装stylus stylus-loader

npm install stylus-loader stylus --save-dev

安装vue-style-loader

npm install vue-style-loader --save-dev

安装css-loader

npm install css-loader --save-dev

安装vuex，全局变量的使用

npm install vuex --save-dev

安装axios，前后台通信框架

npm install axios --save-dev

安装iviewui，第三方框架

npm install iview --save-dev

安装echarts

npm install echarts --save-dev

安装jquery

npm install jquery --save-dev

import $ from 'jquery'

从github上down项目vue项目下来的时候，在控制台执行

npm install

之后再运行项目即可

剩下的跟平时开发是一样的了

到此这篇关于利用Vue-cli搭建Vue项目框架的教程详解的文章就介绍到这了,更多相关Vue-cli搭建Vue项目框架内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈Vue CLI 3结合Lerna进行UI框架设计

    当前大部分UI框架设计的Webpack配置都相对复杂,例如 Element. Ant Design Vue和Muse-UI等Vue组件库.例如Element,为了实现业务层面的两种引入形式( 完整引入 和 按需引入 ),以及抛出一些可供业务层面通用的 utils . i18n 等,Webpack配置变得非常复杂.为了简化UI框架的设计难度,这里介绍一种简单的UI框架设计,在此之前先简单介绍一下 Element 的构建流程,以便对比新的UI框架设计. 一般组件库的设计者将引入形式设计成 完整引入

  • vue-cli3搭建项目的详细步骤

    中文文档 https://github.com/vuejs/vue-docs-zh-cn 在安装之前请装好nodeJs 安装vue cli3 1. 检测vue 的版本 vue -V (V大写) or vue --version 2. 安装@vue/cli npm install -g @vue/cli (ps: vue cli2的安装方法 npm install -g vue-cli ) 安装全局桥插件,能兼容使用vue cli2 npm install -g @vue/cli-init cmd

  • vue-cli5搭建vue项目的实现步骤

    vue-cli5搭建vue项目的实现步骤

    vue-cli 的最新版本是5.0.4 首先需要全局安装 vue-cli yarn global add @vue/cli 已经安装的可以升级到最新版 yarn global upgrade --latest @vue/cli 然后开始使用 vue-cli 5 搭建项目 ‘hello-world’ vue create hello-wold 会出现下面的配置项: 1. 选择自动配置还是手工配置 选择手工配置 2. 选择插件 选择babel,typscript,路由,css预编译,代码格式化 3.

  • Vue-cli框架实现计时器应用

    Vue-cli框架实现计时器应用

    技术背景 本应用使用 vue-cli 框架,并使用了自定义组件(将按钮拆分成单独的组件)和vue 模板. 使用说明 开始正计时:点击工具栏的"开始正计时"按钮即可,快捷键为"Enter"键. 开始倒计时:在输入框内写入时间后,点击"开始倒计时"按钮,即可开始倒计时. 暂停计时器:点击"暂停计时器"按钮即可暂停. 清空正/倒计时:点击此按钮,计时器便会回到初始状态,等待新的计时. 重新再计时:点击此按钮,计时器便会重新开始此次计

  • vue-cli4.5.x快速搭建项目

    vue-cli4.5.x快速搭建项目

    一.安装vue-cli npm i @vue/cli -g 二.创建项目 vue-cli会创建一个完整的项目文件夹,内部包含src等,我们仅需要cd进打算放置这个项目文件的文件夹内执行如下代码即可; 1.生成项目文件; 终端输入: vue create projectname 2.选择生成配置方式 此处选择最下面一项进行手动配置 (你要是喜欢用eslint就直接选vue3那项就好) 3.插件选择 选择你需要的插件,上下箭头移动,空格切换选取状态 选错或漏选?没事,构建完毕后你依然可以通过Vue

  • 手把手教你Vue-cli项目的搭建

    目录 一.创建项目 二.选择 Preset 三.勾选需要的工具 四.选择vue版本2 五.vue-router的模式选择 六.选择CSS预处理器 七.选择代码风格 八.代码检查(选择默认) 九.文件存储(选择第一个分开存储) 十.是否保存你的预设置(取名字) 十一.添加到gitignore 十二.创建完成 十三. 运行项目 十四.二次创建项目 总结 一.创建项目 vue create project-demo 二.选择 Preset 三.勾选需要的工具 四.选择vue版本2 五.vue-rout

  • 利用Vue-cli搭建Vue项目框架的教程详解

    首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e

  • 基于mpvue搭建微信小程序项目框架的教程详解

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发 前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用

  • Visual Studio 2019配置vue项目的图文教程详解

    一,环境安装 1:Vue项目一切基于Node.js,必须先安装NodeJS, 下载地址:https://nodejs.org/zh-cn/ 安装nodejs,一路next就行了 Additonal工具可以不用安装. win+r 输入cmd 输入 node -v 和 npm -v 得到版本信息证明装好了. 2:确认Visual Studio 2019环境:看扩展工具里有没有勾选NodeJs 二,使用VS2019 创建Vue项目 后期会新增多个vue的项目,所以建议加一个vue名称 方案管理文件 你

  • vue从使用到源码实现教程详解

    vue从使用到源码实现教程详解

    搭建环境 项目github地址 项目中涉及了json-server模拟get请求,用了vue-router: 关于Vue生命周期以及vue-router钩子函数详解 生命周期 1.0版本 1.哪些生命周期接口 init Created beforeCompile Compiled Ready Attatched Detached beforeDestory destoryed 2.执行顺序 1. 不具有keep-alive 进入: init->create->beforeCompile->

  • 使用 Docker 搭建 Laravel 本地环境的教程详解

    使用 Docker 搭建 Laravel 本地环境的教程详解

    Laravel 官方提供 Homestead 和 Valet 作为本地开发环境,Homestead 是一个官方预封装的 Vagrant Box,也就是一个虚拟机,但是跟 docker 比,它占用体积太大,启动速度慢,同时响应速度很慢,现在有了 docker 这种更好的方式,可以轻松方便的搭建整套 PHP 开发环境. 本文就介绍如何使用 docker 搭建 Laravel 本地环境. 安装 docker 首先安装 docker. 克隆 laradock laradock 官方文档: http://

  • BootStrop前端框架入门教程详解

    BootStrop前端框架入门教程详解

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap提供了三种类型的下载: -----------------------------------------------

  • Ubuntu系统搭建django+nginx+uwsgi的教程详解

    1. 在开发机上的准备工作 1.确认项目没有bug. 2.用pip freeze > requirements.txt将当前环境的包导出到requirements.txt文件中,方便在部署的时候安装. 3.将项目上传到服务器上的/srv目录下.这里以git的形式为例,打开终端,依次输入如下命令 •git init •git remote add origin xxx.git •git add . •git commit -m 'first commit' •git pull origin mas

  • 使用VScode搭建ROS开发环境的教程详解

    俗话说＂工欲善其事必先利其器＂,之前在Ubuntu上运行的ROS项目都是用vim或者gedit编写和修改代码,然后在终端编译运行,很不方便,函数跳转查看都没办法实现.所以今天我决定找一个方便的开发工具,也就是找一个像Windows上的VS那样的集成开发工具(IDE),ROS官网上有一个不同IDE的对比文章,网址在这里 我选择使用VScode．下载安装好VScode后,在扩展栏安装C/C++,CMake,CMake Tools,Code Runner,ROS(deprecated),Chinese

  • 如何利用@angular/cli V6.0直接开发PWA应用详解

    如何利用@angular/cli V6.0直接开发PWA应用详解

    什么是PWA PWA(Progressive Web App)利用TLS,webapp manifests和service workers使应用程序能够安装并离线使用. 换句话说,PWA就像手机上的原生应用程序,但它是使用诸如HTML5,JavaScript和CSS3之类的网络技术构建的. 如果构建正确,PWA与原生应用程序无法区分. PWA 的主要特点包括下面三点: 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的

  • Vue CLI3搭建的项目中路径相关问题的解决

    这是开头 最近在试水 Vue CLI 3,并且尝试配置一个多页面(多应用)项目出来,期间又遇到各种路径问题,于是...于是有了下面的唠叨. 以下都是基于 Vue CLI 3 来举例说明的,使用 2.x 版本的其实也类似 首先,参考 官方文档对静态资源处理的说明,并通过自己的实践,可以总结出以下内容 静态资源可以通过两种方式进行处理: 1.以下情况下,资源不会被 webpack 处理,而是被直接拷贝: 放置在 public 目录下,即使未被使用. 通过绝对路径被引用,即以 / 开头的路径. 2.以

随机推荐