node安装并结合npm搭建vue项目

祁仙森

已于 2022-11-06 21:04:49 修改

阅读量1.3k

点赞数 1

分类专栏：前端 vue 文章标签： vue

于 2020-03-03 17:30:12 首次发布

本文链接：https://blog.csdn.net/xibei19921101/article/details/104636795

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

一、如何使用vue

1.script

若项目直接通过script加载CDN文件，则：

<script src=http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js></script>

2.npm

若项目基于npm管理依赖，则可以使用npm安装vue，执行如下命令：

$ npm i vue --save-dev

3.bower

若项目基于bower管理依赖，则可以使用npm安装vue，执行如下命令：

$ bower i vue --save-dev

二、结合npm搭建一个vue项目

1.首先安装node.js

1).进入node.js官网下载相应的安装包：Node.js

2).安装node.js后在cmd指令输入node -v以及npm -v出现相应的版本号表示已经安装完成

3).配置npm在安装全局模块时的路径和缓存cache的路径，因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示：

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix "D:\SDE\Node11.8.0\node_global"
npm config set cache "D:\SDE\Node11.8.0\node-cache"
#配置镜像源（淘宝镜像）
npm config set registry https://registry.npm.taobao.org

执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”，值为“D:\SDE\Node11.8.0\node_modules”，如下图：

最后编辑用户变量里的Path，将相应npm的路径改为：D:\SDE\Node11.8.0\node_global，如下：

4).最后使用npm config list指令查看配置

三、搭建项目

1.安装vue-cli脚手架

使用指令npm install -g vue-cli，其中-g表示全局的意思，结合上面配置的npm全局安装配置所使用

使用vue -V查看当前vue的版本(注：其中-V中的V一定得是大写)

2.准备就绪，着手搭建项目

在合适的地方创建一个目录

cmd指令切换到该目录下，或者直接在目录栏上输入cmd然后回车

输入指令vue init webpack,下载模板(必须连接外网)

然后一个vue项目就搭建好了

3.cmd进入该项目然后输入npm install指令，安装项目所依赖的包

若install或者搭建过程中遇到

npm ERR! Unexpected end of JSON input while parsing near '...npmjs.org/node-...

解决方案，删除项目目录下的所有文件，然后输入指令

npm cache clean --force

4.重新搭建一遍然后，输入npm run dev，启动项目

打开浏览器输入localhost:8080，即可看到vue 模板项目

四、vue项目目录结构介绍

├── index.html                      入口页面
    ├── build                           构建脚本目录
    │   ├── build-server.js                 运行本地构建服务器，可以访问构建后的页面
    │   ├── build.js                        生产环境构建脚本
    │   ├── dev-client.js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
    │   ├── dev-server.js                   运行本地开发服务器
    │   ├── utils.js                        构建相关工具方法
    │   ├── webpack.base.conf.js            wabpack基础配置
    │   ├── webpack.dev.conf.js             wabpack开发环境配置
    │   └── webpack.prod.conf.js            wabpack生产环境配置
    ├── config                          项目配置
    │   ├── dev.env.js                      开发环境变量
    │   ├── index.js                        项目配置文件
    │   ├── prod.env.js                     生产环境变量
    │   └── test.env.js                     测试环境变量
    ├── mock                            mock数据目录
    │   └── hello.js
    ├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
    ├── src                             项目源码目录    
    │   ├── main.js                         入口js文件
    │   ├── app.vue                         根组件
    │   ├── components                      公共组件目录
    │   │   └── title.vue
    │   ├── assets                          资源目录，这里的资源会被wabpack构建
    │   │   └── images
    │   │       └── logo.png
    │   ├── routes                          前端路由
    │   │   └── index.js
    │   ├── store                           应用级数据（state）
    │   │   └── index.js
    │   └── views                           页面目录
    │       ├── hello.vue
    │       └── notfound.vue
    ├── static                          纯静态资源，不会被wabpack构建。
    └── test                            测试文件目录（unit&e2e）
        └── unit                            单元测试
            ├── index.js                        入口脚本
            ├── karma.conf.js                   karma配置文件
            └── specs                           单测case目录
                └── Hello.spec.js

package.json文件介绍: