一、安装node

打开cmd输入node -v查看是否安装成功

显示node版本号表示安装成功,显示‘node’不是内部或外部命令表示未安装node。
node安装地址:http://nodejs.cn/download/
注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上。

二、vue-cli3.0全局安装

输入npm install -g @vue/cli命令全局安装,完成后输入vue -V(V大写)查看是否安装成功。

显示vue版本表示安装成功。

输入vue查看vue命令

三、开始创建项目

新建一个文件夹,cmd切换到该文件夹,输入vue create project-name命令。


按键盘上下键选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了(注:现在vue-cli3.0默认使用yarn下载),这里我们来选择手动下载。

四、进行配置选择

你项目中用到哪些就选择相应的进行配置就行了(注:空格键是选中与取消,A键是全选)。

五、选择css预处理,这里我选择stylus

六、选择ESLint + Prettier

七、选择语法检查方式,这里我选择第一个保存就检测

八、选择把Babel、PostCss、ESLint这些配置的文件放哪里,这里我选择第一个独立放置文件

九、是否记录以便下次继续使用这套配置(选择Y需要输入保存名字,N不记录)

十、等待下载依赖模块

十一、cd到project-name然后npm run serve启动项目

十二、修改端口,在根目录下创建vue.config.js

官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions

vue脚手架3.0的搭建的更多相关文章

  1. Vue脚手架(vue-cli)搭建和目录结构详解

    一.环境搭建 1.安装node.npm.webpack,不多说 2.安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V( ...

  2. React/VUE 脚手架2.0和3.0

    react官方脚手架 npm install -g create-react-app create-react-app my-app cd my-app npm start 区别自己对比 vue2.x ...

  3. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

  4. vue脚手架3.0的安装与使用

    一.安装 1.先检查是否有安装vue  (vue-cli3需要node大于等于8.9版本) //vue -V 2.如果没安装跳过.安装有3.0以下的版本就的先卸载掉以前的版本 npm uninstal ...

  5. vue-cli3.0 vue脚手架3.0的使用

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn globaladd @vue/cli 安装成功后查看版本:vue -V(大写的V)     2.命令 ...

  6. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  7. 从0开始搭建vue+webpack脚手架(三)

    在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...

  8. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  9. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

随机推荐

  1. ACM训练联盟周赛(第一场)

    B:Zeratul与Xor 题目描述 Xor(按位异或),对应C++中的“^”运算符. Zeratul给出了一个数列A[n](n≤105),要做q(q≤105)组动作,这些动作包括: 1  a:数列中 ...

  2. 因子问题 I - Ugly Numbers

    题目: Ugly numbers are numbers whose only prime factors are 2, 3 or 5 . The sequence 1, 2, 3, 4, 5, 6, ...

  3. iOS——集成支付宝 系统繁忙,请稍后再试ALI10

    问题描述:调用支付宝时,显示系统繁忙,请稍后再试(ALI10).代码没有报错,其他也是按照文档来的,为何老是提示显示系统繁忙? 解决方案:还需要在targets的中info里面,添加  url typ ...

  4. 免费录屏软件之OBS Studio

    好久没有再博客活动啦,今天给大家推荐一下录屏软件吧!首先我个人最喜欢的OBS Studio就说说它吧 1.免费.开源.功能强大.易上手 ​ ​ ​ 下面是下载地址: 官网下载 : https://ob ...

  5. 【转】[译]理解HTTP/304响应

    [转][译]理解HTTP/304响应 原文:http://www.telerik.com/automated-testing-tools/blog/eric-lawrence/12-11-06/und ...

  6. Apache CXF实战之二 集成Sping与Web容器

    本文链接:http://blog.csdn.net/kongxx/article/details/7525481 Apache CXF实战之一 Hello World Web Service 书接上文 ...

  7. ruby redis的集群管理器

    #========================================================================================== # => ...

  8. 大数据时代的新BI系统架构发展趋势

    商业智能(BI,Business Intelligence).它是一套完整的解决方式,用来将企业中现有的数据进行有效的整合,高速准确的提供报表并提出决策根据.帮助企业做出明智的业务经营决策.     ...

  9. java教程(五)SSH框架-配置

    前言:从这篇博客開始我将继续讲述Java教程:SSH篇.主要内容环绕SSH框架分析与搭建,今天先简介一下SSH的配置. SSH配置顺序是: spring-->hibernate-->str ...

  10. 有关c语言指针的总结

    #include<stdio.h> void main() { int a[3]={1,3,5};//一维数组 int *num[3]={&a[0],&a[1],& ...