首先这里记录的是基于安装node.js 的npm安装vue  如果你不是用的node与npm  那就不必往下看了

1.安装node.js这个不多说   百度有很多

2.安装webpack

全局安装webpack(直接安装全局即可,以后要经常使用,安装后直接进入第三步)
npm install webpack -g

这里补充一下

全局安装就是装一次任何时候任何项目都可以直接使用,一般情况下我是在C盘或者D盘根目录下创建一个www文件夹,(路径一切非包含中文)

然后所有的项目都放到这个www文件夹里面   全局安装的插件什么的包括后期创建的项目都需要先cd到www文件后执行npm命令,

这样便于管理和后期查找项目文件和配置文件

依赖项安装是cd 到项目后安装   仅作为这个项目的使用依赖项   其他项目不能公用

通常我们会将webpack安装到项目依赖,这样就可以使用本地版本的webpack(不安装全局,作为依赖项也可以)
//node启动   cd进入项目目录
//确定已有package.json,没有就npm init 创建
$ npm install webpack --save-dev

//查看webpack 版本信息
$ npm info webpack
//安装指定版本
$ npm install webpack@4.12.x --save-dev
如果要使用webpack开发工具,要单独安装 webpack-dev-server
$ npm install webpack-dev-server --save-dev

3.安装vue-cli脚手架   脚手架集成了很多必须的包和配置   也是官方推荐的安装

单页面应用环境一次性搭建   官方推荐    底层基于webpack搭建的

全局安装 vue-cli
npm install --global vue-cli

4.创建一个vue基于 webpack 模板的新项目 在www目录下
vue init webpack my-project         (my-project)是项目名字,非中文  可以自己更换

然后自动下载东西(模板)   几秒钟后问你文件名字确定用这个   可以更改

这里我不改了

然后回车-回车-回车-再回车(应该是四下)   慢点  接着出现   y/n选项了

这里我们输入y (第一次)

下面又出现y/n (下面的几项全选n,应该是三个n)也就是只有第一个是y

这里停顿一下  千万不要按快了   出现下面选项 (需要执行严格模式之类的)就是你编写代码的时候  上下行格式必须有空四格,必须加引号之类的

这里我们选择最后一个No, I will handle that myself   方向键控制    然后回车

>Yes, use NPM
Yes, use Yarn
No, I will handle that myself(选择这一项)

然后cd到你的项目文件夹下(必须   否则报错)

D:\www>cd my-project

然后输入指令  npm i  安装项目所需要的依赖包

如果npm安装不上的话,可以使用淘宝镜像cnpm安装  前提是先安装淘宝镜像(自行百度,或者看我的另一个文章)

并且如果你的安装过程中开始如果使用了npm  就绝对不能在使用cnpm  反之同样

(查看当时用什么方法安装的可以打开项目本地D:\www\my-project\node_modules文件夹,一直往下拉,看文件夹图标带不带快捷方式的小箭头,如果有就是cnpm方式,正常文件夹图标就是npm方式安装,这个只有在安装后执行npm run dev命令后才有这个node_module文件夹)

好了  一个基于webpack的vue项目文件就创建完成了

下面我们cd 到项目文件中   我的在D盘   根据自己的选择

D:\www>cd my-project

然后npm run dev(或者npm start)   回车  等个几秒钟  出现 Your application is running here: http://localhost:8080

浏览器会自动打开localhost:8080   看到vue页面就可以了   如果没有自动打开 就自己输入地址打开  这个无所谓的

然后打开本地的项目文件夹  拖到Hbuider 或者vscode编辑器中就可以开始编辑项目了  这里推荐vscode  安装vetur插件  很好用

当我们安装完成后就可以安装其他的vue全家桶  需要什么装什么

npm i element-ui -S           安装饿了么UI框架
npm install axios    安装axios,官网推荐安装的封装的ajax 
npm install vuex --save      这个一般大点的复杂项目用

对于安装完成后项目的每个文件是用处可以百度或者点击菜鸟教程的  http://www.runoob.com/vue2/vue-directory-structure.html   进行查看

注:转载请标明链接出处   https://www.cnblogs.com/liuda-page/p/9237800.html     一分耕耘,一分收获。

vue安装和使用的更多相关文章

  1. [Vue安装教程]十分钟学会vue 安装

    Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...

  2. 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  3. vue安装搭建

    title: vue安装搭建 date: 2018-04-21 14:00:03 tags: [vue] --- 安装 首先安装nodejs 直接官网下载最新版本http://nodejs.cn/do ...

  4. vue安装及环境搭建

    vue项目在pycharm里运行需要安装一个插件,打开settings,找到plugins,里面搜索vue.js,点击安装. vue安装 先安装node.js npm install -g @vue/ ...

  5. Vue系列(2):Vue 安装

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...

  6. vue 安装与起步

    vue安装: 1.官网下载vue,在script标签里引用(去下载) 2.使用CDN(建议下载到本地,不推荐这种方法): BootCDN:https://cdn.bootcss.com/vue/2.2 ...

  7. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  8. vue安装遇到的5个报错小结

    前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 2017年我写过一篇安装vue的博客,详情:https://www.cnblogs.com/tu-0718/p/752109 ...

  9. vue安装及创建项目的几种方式

    原文地址:https://www.wjcms.net/archives/vue安装及创建项目的几种方式 VUE安装的方式 直接用 script标签 引入 对于制作原型或学习,你可以这样使用最新版本: ...

  10. deepin vue安装步骤

    deepin安装node.js sudo wget https://nodejs.org/dist/v9.2.0/node-v9.2.0-linux-x64.tar.xz tar xJf node-v ...

随机推荐

  1. [Swift]LeetCode254.因子组合 $ Factor Combinations

    Numbers can be regarded as product of its factors. For example, 8 = 2 x 2 x 2; = 2 x 4. Write a func ...

  2. [Swift]LeetCode294. 翻转游戏之 II $ Flip Game II

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...

  3. [Swift]LeetCode538. 把二叉搜索树转换为累加树 | Convert BST to Greater Tree

    Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the original B ...

  4. [Swift]LeetCode653. 两数之和 IV - 输入 BST | Two Sum IV - Input is a BST

    Given a Binary Search Tree and a target number, return true if there exist two elements in the BST s ...

  5. 初探React与D3的结合-或许是visualization的新突破?

    自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...

  6. 利用Python爬去囧网福利(多线程、urllib、request)

    import os; import urllib.request; import re; import threading;# 多线程 from urllib.error import URLErro ...

  7. MVC的App_Code这个特殊文件夹

    对于一个之前编译一点都没有问题的项目,突然间调试就出现了一个报错: 然而你会天真的认为,这个真的是using的问题吗!别傻了,我检查了一遍又一遍: 首先这个是有using的! 其实代码编写上也是没有报 ...

  8. IdentityServer Topics(7)- 注销

    注销IdentityServer与删除身份cookie一样简单,但是我们必须考虑将用户从客户端应用程序(甚至可能是上游身份提供程序)中注销. 一.删除身份认证Cookie 要删除身证认证cookie, ...

  9. Markdown 文档生成工具

    之前用了很多Markdown 文档生成工具,发现有几个挺好用的,现在整理出来,方便大家快速学习. loppo: 非常简单的静态站点生成器 idoc:简单的文档生成工具 gitbook:大名鼎鼎的文档协 ...

  10. Jvm垃圾回收器(基础篇)

    一:概述 在这篇文章中<Jvm运行时数据区>介绍了Java内存运行时区域的各个部分,其中程序计数器.虚拟机栈.本地方法栈,3个区域随着线程的生存而生存的.内存分配和回收都是确定的.随着线程 ...