博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue(一)安装
阅读量:7091 次
发布时间:2019-06-28

本文共 1622 字,大约阅读时间需要 5 分钟。

 

环境准备

这里我们就直接使用官方推荐的Vue CLI方式

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架,或者直接通过 vue serve 构建新想法的原型。

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包,局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于  和  之上的。它包含了:

  • 加载其它 CLI 插件的核心服务;
  • 一个针对绝大部分应用优化过的内部的 webpack 配置;
  • 项目内部的 vue-cli-service 命令,提供 servebuild 和 inspect 命令。

1.你首先需要安装node.js,自行下载安装即可。

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载它。

Vue CLI 需要  8.9 或更高版本 (推荐 8.11.0+)。

2. 安装Vue CLI 3

npm install -g @vue/cli

 

3. 查看版本

Microsoft Windows [版本 6.1.7601]版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Windows\System32>node --versionv8.11.1C:\Windows\System32>vue --version3.0.1C:\Windows\System32>

 

安装方法一(通过命令)

1. 打开cmd

2. 创建工程

vue create hello-world

3. 选择配置

第一个是默认配置,非常适合快速创建一个新项目的原型;

选择之后就直接安装了,等待即可。

第二个手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。比如你可以选择Router-路由

 

按空格进行选择/取消,按回车确定,然后出现如下

问你是否使用路由模型,输入Y回车,出现

回车,出现

继续回车,出现【问你吧Babel,PostCSS,ESLint等等的配置放在哪里】

我们选择第二个,出现【问你是否把这个配置保存,以备未来的项目复用】

N,回车,就开始安装了【这个只是演示了一下手动设置,练习的话就直接用默认的就可以】

==================彩蛋==================

后来我再次运行这个脚本,发现有三个选项了

因为我在上面手动配置的最后(Save this as a preset for future projects?(y/N))选择了y,然后起名为a。所以之后再建立工程,就会出现咱们自定义的这个选项。

==================彩蛋==================

4.运行

$ cd hello-world $ npm run serve

 

5. 打包

$ cd hello-world $ npm run build

 根目录会出现一个dist文件夹

安装方法二  (通过Webstorm)

1. 打开Webstorm

2. 建立新工程

 

3. 选择Vue.js

4. 下一步【这里比命令行多了一个选择:包含路由的配置、默认配置、手动配置】

5. Next,直接建立工程

工程建立好,目录是这样的

6. 调出npm命令面板【右键package.json】

面板里包含运行和打包的命令

 

 =============================

 也可以通过Webstorm打开我们前面建立的helloworld工程

 

..

 

 

 安装到此为止

 

转载于:https://www.cnblogs.com/LUA123/p/10313564.html

你可能感兴趣的文章
android sqlite 图片保存和读出
查看>>
Android开机自启动程序
查看>>
C++ PAT乙 1080. MOOC期终成绩 (25)
查看>>
关于layoutparam 请铭记。。。。
查看>>
DevExpress_Report 主从报表绑定数据,分页打印
查看>>
小强的HTML5移动开发之路(3)——HTML5与HTML4比较
查看>>
使用unity3D开发同时打开手机前后摄像头实例程序
查看>>
装饰器
查看>>
转: C# 根据当前时间获取,本周,本月,本季度等时间段 .Net中Exception
查看>>
Java语言基础相关问题
查看>>
spring boot集成swagger2
查看>>
写代码的三重境界
查看>>
hibernate中懒加载和急加载的区别,以及hibernate中get()方法和load()方法的区别
查看>>
最适合程序员编程的10款字体
查看>>
Hierarchyviewer定位Android图片资源的研究
查看>>
sqlserver关于时间的一些语句
查看>>
失效的URL访问限制(转)
查看>>
转:你应当如何学习C++(以及编程)(rev#1)
查看>>
加密解密算法与通讯安全(五)
查看>>
说说Java代理模式
查看>>