连接转载:https://www.cnblogs.com/Colwill-Blog/p/6682091.html

刚刚开始学习Vue.js。今天分享一下我的Vue项目安装过程。

我是windows系统,使用安装工具是NPM

一、Vue安装

1、检查是否已经安装了node和npm

  在命令窗口(windoes + R 键打开输入cmd确认)输入node -v 和npm -v,如果显示出版本号,说明安装成功

2、安装vue-cli

  在全局安装vue-cli 

npm install -g vue-cli

(这种方法安装较慢,可以使用国内淘宝镜像安装:npm install -g cnpm --registry=https://registry.npm.taobao.org/

  如果安装失败,可以使用 npm cache clean清理缓存,然后再重新安装。

输入cnpm -v 查看是否安装成功,输入cnpm install -g vue-cli 安装vue-cli和webpack )

完成后输入vue -V(V大写)查看是否安装成功

若提示无法识别vue,可输入npm install -g npm 更新npm 版本

3、生成项目

  (我使用的是webpack模板,更多模板可以到vue.js的github上查看,地址:https://github.com/vuejs-templates)

  在你的项目文件夹内打开命令窗口(或在命令行中进入项目目录),输入vue init webpack Vue-project ( MyVue-project是自定义的项目名称)

命令执行后,会在当前目录内生成一个以自定义项目名称命名的项目文件夹

如图进行配置,配置完成后,输入cd Vue-Project 进入项目目录,

 输入cnpm install 安装依赖包

 输入npm run dev 启动项目

//若浏览器无法加载页面,可以修改一下配置文件config里的 index.js 文件

如图:

将build路径前缀修改为‘./’,是因为打包之后,外部引入js和css文件是,以'/'开头的路径,在本地无法找到对应文件。

VUE项目安装的更多相关文章

  1. vue项目安装sass/scss

    vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...

  2. vue-cli新建vue项目安装axios后在IE下报错

    使用脚手架新建了一个vue项目,可以在IE9+浏览器运行,但是在添加了axios后,在IE下就报错了 首先是安装axios,在命令行执行: $ npm install axios -s //执行命令, ...

  3. vue项目安装vux

    本文章默认基于“vue init webpack myproject”已经搭好基本的项目, 而且本文是从我有道笔记拷贝稍加修改过来的 本来我私人笔记写给自己看的所以有些地方可能描述不够清晰 需要修改的 ...

  4. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  5. Vue项目安装CubeUI

    CubeUi GitHub地址:https://github.com/didi/cube-ui install vue add cube-ui 项目中 会多出cube ui 的配置文件来

  6. vue项目安装scss,以及安装scss报错(this.getResolve is not a function)

    1.安装scss: npm install node-sass sass-loader vue-style-loader --save-dev //安装node-sass sass-loader vu ...

  7. vue项目安装sass步骤等遇到的问题

    1.安装sass依赖包 npm install --save-dev sass-loader 注释(可能会出现问题:sass-loader版本过高导致,可以将其package.json中的版本改为7. ...

  8. vue 项目安装sass的依赖包

    安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node- ...

  9. vue 项目安装

    安装stylus npm install stylus stylus-loader --save-dev

随机推荐

  1. CodeForces - 589D(暴力+模拟)

    题目链接:http://codeforces.com/problemset/problem/589/D 题目大意:给出n个人行走的开始时刻,开始时间和结束时间,求每个人分别能跟多少人相遇打招呼(每两人 ...

  2. Linux网络那点事(CentOS、Ubuntu、Kali)

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 在Ubuntu18.04中,传统的配置/etc/network/interfa ...

  3. QML学习笔记(一)-防止鼠标穿透事件

    作者: 狐狸家的鱼 Github: 八至 1.防止鼠标穿透 MouseArea{ anchors.fill: parent; onClicked: {}; onReleased: {}; onPres ...

  4. Max Mex

    Max Mex 无法直接处理 可以二分答案! [0,mid]是否在同一个链上? 可以不修改地做了 修改? 能不能信息合并?可以! 记录包含[l,r]的最短链的两端 可以[0,k][k+1,mid]合并 ...

  5. 删除文件夹下面的文件的shell命令

    首先看我的文件所在目录 我想删除位于desktop下面的helloBox中的react-hello-dimple中的package.json文件,我们注意一下时间是4月18号 shell命令如下 $ ...

  6. vue学习(1)

    前置的准备学习: ES6简单语法: 1.let和const 2.模板字符串 3.箭头函数 4.对象的单体模式 5.es6的面向对象 6.模块化 1.let和const <script type= ...

  7. http请求流程

  8. 原生JS实现jquery的ready

    function ready(fn){ if(document.addEventListener){ //标准浏览器 document.addEventListener('DOMContentLoad ...

  9. idea 红线 并提示idea cant resolve symbol

    能编译通过说明SDK导入正确,但是为啥我们点击每一个Java文件会出现好多红色的下划线 ,并提示idea cant resolve symbol原因就是可能没有清除原来的历史缓存,导致一些错误,解决方 ...

  10. MySQL中IO问题定位

    在前面讲过在linux下定位磁盘IO的一个命令:iostat其实还有一个查看linux下磁盘IO读写速度命令:iotop 查看iotop -help,有哪些用法 # iotop -help Usage ...