一、搭建工作环境环境

  1、从node.js官网下载相应版本进行安装即可 https://nodejs.org/zh-cn/download/,安装完成后在命令行输入  node -v 如果可以查询到版本号,说明安装成功。

  2、node自带npm包管理工具,在命令行输入  npm -v 如果查询到版本号,说明正常

  3、npm下载太慢,需要下载国内淘宝镜像: npm install -g cnpm --registry = https://registry.npm.taobao.org,安装完成后输入 cnpm -v 显示版本号,说明正常

  4、安装webpack(包管理工具),命令行输入  cnpm i webpack -g   ,-g说明是全局安装

  5、安装vue.cli 3.X脚手架,命令行输入 cnpm i @vue-cli -g      不选择版本号,将下载最新的稳定版本,输入vue -V 可查看版本

二、创建项目

  1、命令行 进入项目目录

  2、创建项目:vue create 项目名称(不要有中文),选择manually select进行选择

  3、进入选择界面

根据项目需求,点击空格进行选择,一般情况下babel、router、vuex、 css都是需要的,然后回车进行创建项目

  4、创建时会询问之前选择项目的配置,根据自身项目 要求进行配置,下图是我的配置

最后选择是否作为默认配置,根据个人需要进行选择即可,然后回车,项目开始下载模板

  5、创建完成后,进入项目目录,输入cnpm run serve 即可启动项目,登陆后界面如下图

  

 

vue3.0学习笔记(一)的更多相关文章

  1. vue3.0学习笔记(二)

    一.选择合适的ide 推荐使用vs code编辑器,界面清晰.使用方便,控制台功能很好用.webstorm也可以,看个人喜好. 二.ui框架选择 目前,pc端一般是选择element ui(饿了么), ...

  2. DirectX 总结和DirectX 9.0 学习笔记

    转自:http://www.cnblogs.com/graphics/archive/2009/11/25/1583682.html DirectX 总结 DDS DirectXDraw Surfac ...

  3. 一起学ASP.NET Core 2.0学习笔记(二): ef core2.0 及mysql provider 、Fluent API相关配置及迁移

    不得不说微软的技术迭代还是很快的,上了微软的船就得跟着她走下去,前文一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx.superviso ...

  4. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue2.0学习笔记之路由(二)路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. hdcms v5.7.0学习笔记

    hdcms v5.7.0学习笔记 https://note.youdao.com/ynoteshare1/index.html?id=c404d63ac910eb15a440452f73d6a6db& ...

  7. dhtmlxgrid v3.0学习笔记

    dhtmlxgrid v3.0学习笔记 分类: dhtmlx JavaScript2012-01-31 15:41 1744人阅读 评论(0) 收藏 举报 stylesheetdatecalendar ...

  8. OAuth 2.0学习笔记

    文章目录 OAuth的作用就是让"客户端"安全可控地获取"用户"的授权,与"服务商提供商"进行互动. OAuth在"客户端&quo ...

  9. 一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx、supervisor、mysql环境搭建

    作为.neter,看到.net core 2.0的正式发布,心里是有点小激动的,迫不及待的体验了一把,发现速度确实是快了很多,其中也遇到一些小问题,所以整理了一些学习笔记: 阅读目录 环境说明 安装C ...

随机推荐

  1. 判断页面是在pc端打开还是在移动端打开

    在项目开发中会遇到在不同的设备中打开页面是不同的,比如: 我在手机中打开一个网站和pc打开一个网站,页面是不同的 具体实施如下 //判断打开网站的终端 var ua = window.navigato ...

  2. javascript数字千分分隔符

    function thousandBitSeparator(num) { num=num.toFixed(2); return num && num .toString() .repl ...

  3. Jmeter连接MySQL配置(能执行多条sql语句)

    Database URL为MySQL的连接串,如果要执行多条SQL语句,后面还要添加“?allowMultiQueries=true”

  4. invalid loc header的解决办法

    eclipse 运行程序,报invalid loc header,网上一查,删除maven仓库(默认位于%USERPROFILE%\.m2\repository\org)中的下载包,然后重新下载.

  5. Citrix 虚拟化 最小化后无法最大化

    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Citrix\wfshell\TWI\创建DWORD类型键值:SeamlessFlags    ...

  6. adnroid 启动是没有标题栏

    <activity android:name=".MainActivity" android:theme="@android:style/Theme.Light.N ...

  7. Flask从入门到做出一个博客的大型教程(一)

    本项目全部在虚拟环境中运行,因此请参照前面的文章,链接为https://blog.csdn.net/u014793102/article/details/80302975 建立虚拟环境后,再接着完成本 ...

  8. ByteBuffer flip描述

    # 关于flip ByteBuffer 的filp函数, 将缓冲区的终止位置limit设置为当前位置, 缓冲区的游标position(当前位置)重设为0. 比如 我们有初始化一个ByteBuffer ...

  9. BootStrap系统

    BootStrsp的引入: <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="// ...

  10. Node.js实现TCP和HTTP并作简单的比较

    TCP和Node 传输控制协议是一个面向连接的协议,换句话说,它是一个传输层的协议,它主要的职务呢,就是确保信息传输的正确性. 我们使用的很多如HTTP协议都是基于TCP的,为什么呢?因为我们不希望传 ...