vue之安装nodejs安装npm安装cpnm安装vue-cli脚手架

搭建vue开发环境。

 

选择对应版本,https://nodejs.org/en/download/

 

安装过程:下一步 路径:(我的D:\Develop\nodejs)下一步就好

安装好之后,对npm安装的全局模块所在路径以及缓存所在路径,进行环境配置。是因为以后在执行类似:npm install express [-g](后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。
例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】
打开cmd输入如下命令

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

接下来点击 我的电脑,属性,高级系统设置

1.新建系统变量

输入NODE_PATH
输入D:\Develop\nodejs;D:\Develop\nodejs\node_global\node_modules    (node安装地址跟自定义地址 用;分开)

2.修改用户变量path

%NODE_PATH%;D:\Develop\nodejs\node_global   (加%NODE_PATH%是为了防止 cmd找不到node报错)

然后保存,对....

 

3、基于nodejs,利用淘宝npm镜像安装相关依赖。

由于国内使用npm会很慢,这里推荐使用淘宝nmp镜像 打开cmd

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

 

完成之后,我们就可以使用cnpm代替npm来安装依赖包了。

到这里测试下node  cnpm有没有问题:  node -v   cnpm -v

ps:解决cnpm不是外部命令:

之前安装npm的时候,配置过node_modules和node_cache。所以去nodejs的目录下去找cnpm装哪个文件夹去了。

我的是D:\software\nodeJS\node_cache

本文件夹下打开cmd 运行cnpm -v

ok,现在去配置系统环境path,把cnpm安装路径加入path里,如下图。

ok到这里问题就解决了,可以直接win+r打开cmd 跑下cnpm -v ,楼主是没有问题的。

4、为什么安装vue-cli脚手架---为了生成vue工程模板

 

安装全局vue-cli脚手架,用于帮助搭建所需要的模板框架 输入 cnpm install -g vue-cli

 

安装完成之后
输入vue测试一下

出现了vue信息说明表示成功
用vue-cli构建项目

查看vue版本vue -V   这个V是大写的 不让会报错

5.打包工具webpack   中文网址:https://www.webpackjs.com/  最近也在研究这东西  感觉逼格很高

6.创建项目

(1)本地创建目录

 

(2)cmd 打开本地,目录E盘下www里的fristvue    注:正确的命令格式是:cd/d E:\www\firstvue

下面这张图是默认地址的截图:

? Project name one  一般直接回车 
? Project description A Vue.js project  项目说明
? Author wxj  开发者
? Vue build standalone 默认回车
? Install vue-router? Yes 个人建议Y
? Use ESLint to lint your code? No 是否启用eslint检测规则,个人建议不使用
? Set up unit tests No  是否创建单元测试
? Setup e2e tests with Nightwatch? No 
? Should we run `npm install` for you after the project has been created? (recommended) npm

7、项目建立完成后,目录结构如下:

8、安装项目所需依赖,进入项目中:

?

1

npm install

完成后,会发现项目目录下多出一个node_modules文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。

9、进入项目目录文件夹(my-project)中,就可以使用vue进行开发啦

10、使用npm run dev,便可以打开本地服务器实时查看效果(localhost:8080)

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

11、初始效果

12,退出监听,可以直接Ctrl+C,选择Y。

参考:https://www.cnblogs.com/guoyinglichong/p/8278467.html    http://www.jb51.net/article/113890.htm

 

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试