vue.js之新手入门

npm和node的关系

npm是Isaac Z. Schlueter用 JavaScript （运行在 Node.js 上）写的 npm，全称是 Node Package Manager

NPM 的思路大概是这样的：

1. 买个服务器作为代码仓库（registry），在里面放所有需要被共享的代码

2. 发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上，分别取名 jquery、bootstrap 和 underscore（注意大小写）

3. 社区里的其他人如果想使用这些代码，就把 jquery、bootstrap 和 underscore 写到 package.json 里，然后运行 npm install ，npm 就会帮他们下载代码

4. 下载完的代码出现在 node_modules 目录里，可以随意使用了。

node.js安装

下载地址：http://nodejs.cn/download/

下载安装包后双击安装包进行安装。

安装完成后查看node版本：键盘win键+r 输入 cmd 回车进入命令行窗口 输入 node -v

 

npm安装

由于node.js自带npm，所以node安装完成后npm也就安装完成了，查看版本：

使用淘宝镜像

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

# 升级或安装 cnpm

npm install cnpm -g

vue项目构建及使用

使用npm安装vue：npm install vue

#全局安装 vue-cli
cnpm install --global vue-cli

切换路径到工作空间
d:
cd D:\workspace\vsCode
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project1

# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project1
? Project description A Vue.js project
? Author *** <***@163.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project1".

   To get started:
   
     cd my-project1
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

项目创建完成。

进入项目，安装并使用开发模式运行：

cd my-project1

npm install

npm run dev

浏览器访问：http://localhost:8081

项目目录如下：

build：项目构建(webpack)相关代码

config：配置目录，包括端口号等。我们初学可以使用默认的。

node_modules：npm 加载的项目依赖模块

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets: 放置一些图片，如logo等。

components: 目录里面放了一个组件文件，可以不用。

App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

main.js: 项目的核心文件。

static：静态资源目录，如图片、字体等。

test：初始测试目录，可删除

.xxxx文件：这些是一些配置文件，包括语法配置，git配置等。

index.html：首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

package.json：项目配置文件。

README.md：项目的说明文档，markdown 格式