从头搭建一个vue项目(搭建构架1)

Vue环境搭建

1.概述:vue环境搭建:需要npm(cnpm),而npm内嵌于Node.js,所以需要下载Node.js。

2.下载Node.js:node.js官方下载

3.安装Node.js:双击 - 选择目录 - 一路next(安装程序会自动把node、npm环境变量配置好)。

4.测试Node.js,npm:打开cmd,输入 node -v 回车,输入 npm -v 回车(node内嵌npm),出现对应版本号说明安装成功,一般是不会有问题的。

5.设置缓存文件夹和全局模块存放路径:
在nodejs路径下新建两个文件夹——node_cache , node_global,然后配置:

npm config set cache "D:\vueProject\nodejs\node_cache"
npm config set prefix "D:\vueProject\nodejs\node_global"

(引号中路径需要针对自己实际的安装路径)
设置成功后,之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里,g就是global
tips:此时你可以在 C:\Users\Administrator 目录下找到 .npmrc文件,以文本打开会发现刚刚配置的信息原来在这里

6.安装cnpm:
简介:基于 Node.js 安装cnpm(淘宝镜像)。由于npm是国际的,国内访问很慢,所以善良的淘宝做了他的镜像 —— cnpm,来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

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

7.cnpm配置环境变量:
打开:任意文件夹 - (右键)此电脑 - 属性 - 高级系统设置 - 环境变量
新建CNPM_PATH变量 路径要根据自己的实际路径

打开cmd测试:cnmp -v;若失败则需要重启。

8:安装Vue:
安装vue:

cnpm install vue -g

安装vue-cli脚手架1:

cnpm install vue-cli -g

安装webpack2:
全局安装

cnpm install webpack -g

不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中。

9.创建vue项目:
创建一个基于 webpack 模板的新项目

vue init webpack my-project

这里需要进行一些配置,默认回车即可
在这里插入图片描述

之后会生成目录结构
在这里插入图片描述
10:打包并运行Vue项目:

cd my-project
cnpm install
cnpm run dev

出现Listening at http://localhost:8080即说明成功了,可以输入地址 http://localhost:8080 访问刚刚创建的vue项目啦。(在cmd中输入 Ctrl+C 退出)
.
.
.
————————————————
版权声明:本文为CSDN博主「aら 淼」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:原文链接跳转

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页