搭建项目，创建项目

1、首先创建项目文件夹，进入文件夹

2、执行命令 vue init webpack testproject 初始化项目，其中有安装选项，用户需要输入选项确认。

    rooter要选Y，其他可默认直接回车

    若当前命令报错，说明npm安装vue-cli是有错误。在当前目录重新安装vue-cli

cnpm 方式安装vue-cli

cnpm i -g vue-cli

安装结束后查看vue版本 

vue -V

npm安装命令默认选择的下载站点是国外网址

cnpm安装命令默认是国内淘宝镜像

创建VUE_CLI:

vue init webpack projectName

Project Name ===> projectname

project description ===>说明

Author===> 作者

Install vue-router? ===>Y

ESLint to lint your code? ===>Y

Set unit tests ===> 单元测试

......

cd projectname

npm run dev

项目地址: http://localhost:8080

cnpm安装:

    npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Vue-cli:

    npm install -g vue-cli

    cnpm install -g vue-cli

vue -V === vue --version 查看vue的版本

-S === --save 安装包信息将加入到生产阶段(dependencies)的依赖

-D === --save--dev 安装包信息将加入到开发阶段(devDependencies)的依赖

i install的缩写

npm install -g vue-cli <===> npm i -g vue-cli

npm install -g --save --dev vue-cli <===> npm i -gD vue-cli

npm init -f 初始化配置===>package.json

卸载cnpm: npm uninstall cnpm -g

删除镜像: npm config delete registry

Vue-cli2安装

    npm: node package manager

    cnpm: taoBao镜像(据说每隔10分钟同步一次node官方库)

-g: global 全局安装

查看全局安装的文件夹位置:  npm root -g

安装Vue-cli2:

    npm install -g vue-cli

    cnpm install -g vue-cli

修改资源服务器地址:

    npm install -gd express --registry=http://registry.npm.taobao.org

    npm config set registry http://registry.npm.taobao.org

Node.js https://www.nodejs.cn

环境变量: 

    node -v 查看node版本

    右击此电脑===>属性===>环境变量===>Path===>写入node安装路径

    *重启Dos命令界面

    npm -v 查看npm版本

    cd 打开文件夹

    md 新建文件夹

    dir 查看文件夹信息

    cd.. 或 cd ../返回上一级

    cls 清屏

Vue-cli

平台无关性,功能齐全

占内存少,高效

帮助我们写好vue基础代码的工具,通用的工具

Vue-cli:

    Vue-cli2

    Vue-cli3

好

备注

如果不用vuecli的模板, 则可执行以下指令:

1) 安装依赖: npm install或cnpm install.

此步执行后, 文件夹内会自动创建一个package-lock.json的文件, 记录各种包的引入时间/版本号等信息.

2) npm init -f或cnpm init -f

注: 此处的-f, 意思是按照默认选项进行安装. 和npm init执行命令后, 一路回车下去一样.

执行此步之后, package.json和node_modules文件夹会被创建出来.

3) npm install vue-router等各种手动的安装各种包.

这步和此前(单独安装或卸载某一组件(如eslint))中所讲的内容一样, 不过是细节展开. (相比不使用vuecli)在项目开始创建时, 用此步骤不但工作量大, 也容易出错.

但在项目开发中, 安装或卸载新的组件包时, 倒是可以用这一步实现.

v4.5.6 组件间传参 Msg.js文件报错

把msg.js里的内容改成下边的

import mitt from 'mitt'

const bus = {}

const emitter = mitt()

bus.$on = emitter.on

bus.$off = emitter.off

bus.$emit = emitter.emit

export default bus

重启报错，按照提示安装 npm install --save mitt，再重启就可以了。

安装vuecli3：vue create 项目名

启动：npm run serve

安装读取json文件组件

router子路由

-S -D 参数

-S, --save 安装包信息将加入到dependencies（生产阶段的依赖）

-D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖）

i 是 install 的缩写（注意：前面没有“-”）

手动指定从哪个镜像服务器获取资源

npm install -gd express --registry=http://registry.npm.taobao.org(使用频率不高,只有在安装脚手架的时候才会使用)

为了避免每次安装都需要--registry参数,可以使用如下命令进行永久设置

npm config set registry http://registry.npm.taobao.org

手动指定从哪个镜像服务器获取资源

npm install -gd express --registry=http://registry.npm.taobao.org(使用频率不高,只有在安装脚手架的时候才会使用)

为了避免每次安装都需要--registry参数,可以使用如下命令进行永久设置

npm config set registry http://registry.npm.taobao.org

常用的dos命令：：

cd 打开文件夹

md 创建文件夹

dir 查看文件夹内容

cd.. 返回上一级文件夹

cls 清屏

http://localhost:8080

http://localhost:8080

启动项目

普通安装vuecli3：npm install -g @vue/cli

淘宝镜像安装vuecli3：cnpm install -g @vue/cli

小贴士

vue-cli2的安装

npm install -gd express --registry=http://registry.npm.taobao.org