vue环境搭建、新建vue项目

好久之前就在本地总结了nodejs的安装、vue安装、新项目搭建,刚翻翻本地的笔记文件夹才想起来发到博客上。。。

vue环境搭建之前,先要安装好Nodejs,具体安装https://blog.csdn.net/alison_rose/article/details/80705846


一、安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

1、  cmd中输入cnpm install -g vue-cli   等待安装

2、   cmd中输入vue,出现vue信息说明成功

 

二、创建项目

1、首先选择存放项目的位置,在cmd中用命令转到选定的目录E:\code\vue\xbw

2、如果有已经存在的vue项目,那么删掉其中的node_modules文件夹。然后在cmd中输入cnpm install。完成后输入cnpm run dev启动项目,在浏览器中输入192.168.8.6:8080(本机的ip地址或者localhost:8080)出现相应的网页即启动成功。

3、创建新项目。vue init webpack myVue(项目文件夹名),回车,出现如图下,依次操作。


扫描二维码关注公众号,回复: 1609645 查看本文章

4、安装依赖

1)在cmd中进入具体的项目下,cnpm install。目录结构中会多了一个node_modules的文件夹(文件夹的内容就是安装的依赖)。

2)运行项目。在项目目录下,cnpm run dev,然后在浏览器输入localhost:8080

默认端口为8080

5、如果创建项目中出现 failed to download repo vuejs-templates/webpack:unable to verify the first certificate

 

是找不到模板,下载不了模板。查看是否有这个文件夹C:\Users\Administrator\.vue-templates。如果没有,去https://github.com/vuejs-templates/下载模板,webpack或者webpack-simple,解压。然后在C:\Users\Administrator\路径下创建一个文件夹,在cmd中改名为.vue-templates,把解压后的文件夹放入。改名命令如下。

 

1)创建项目。vue init webpack first --offline。出现git 后如下操作。

? Project name  输入项目名称

? Project description 输入项目描述

? Author 作者

? Vue build 打包方式,回车就好了

? Install vue-router?  选择  Y 使用 vue-router,输入 N 不使用(安装路由插件)

? Use ESLint to lint your code? 代码规范,推荐 N

? Setup unit tests with Karma + Mocha? 单元测试,推荐 N

? Setup e2e tests with Nightwatch? E2E测试,N

 

 

2)输入npm install

     运行项目 cnpm run dev

     在浏览器输入localhost:8080,出现vuelogo的页面就算成功了

6、今天在项目安装依赖的时候遇到了这样三个问题

     其实都warn警告,不是error错误,所以也可以忽略。


(1)问题:npm WARN [email protected] requires a peer of [email protected] but none is installed.

    解决:[email protected]需要安装依赖[email protected],但是没有安装,那么我们就手动安装

              npm install [email protected]

              结果如下,还剩下俩问题


(2)问题:npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]<node_modules\fsevents>:

(3)问题:npm notsup SKIPPING OPTIONAL DEPENDENCY : Unsupported platform for [email protected] : wanted {"os":"darwin","arh":"any"} (current:{"os":"win32","arch":"x64"})

     解决:其实也不是解决了。(2)(3)是因为fsevents是mac oxs系统的,在windows或者Linux下使用,会有警告,可以忽略。

猜你喜欢

转载自blog.csdn.net/Alison_Rose/article/details/80705891