vue脚手架的搭建

一、首先是node环境搭建:

1、去node的官网下载版本,个人不建议下载最新的版本,我就是下载了最新的版本,搭建脚手架的时候,一步一个坑;这个安装的话;安装好后:

                        在cmd命令行,可以用 :node -v查看安装的情况及版本以及npm -v查看npm的版本

2、环境配置:在命令行输入一下2行命令:主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,

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

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

                        a、下来设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

                        b、进入环境变量对话框,在【系统变量】下新建【NODE_PATH】,输入【D:\Develop\nodejs\node_global\node_modules】,

                       c、 将【用 户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】

3、cnpm的安装:(淘宝的镜像,npm的服务器是国外的,下载很慢)

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

                        cnpm -v ====如果安装成功会显示版本号:

不成功的话可以试试:(我也是找了很多帖子看到的,反正我遇到的这个问题是成功解决了的---cmd)

                       npm set registry https://registry.npm.taobao.org # 注册模块镜像

                       npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像

                       npm cache clean --force # 清空缓存

                        最后再试试  npm install -g cnpm --registry=https://registry.npm.taobao.org

                        安装成功的话cnpm -v是可以看到版本号的



二、安装webpack:下面两行都是可以的

            npm install webpack -g  或者   cnpm install webpack -g

            安装的话可能会遇到下面的问题——解决方法如下:

                    在网上搜索答案中发现在webpack 3中,webpack本身和它的CLI以前都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。

                尝试全局安装npm install -g webpack-cli

                执行webpack -v成功执行 不再提示安装webpack-cli

三、安装vue-cli脚手架构建工具,

a、打开命令行工具输入:npm install vue-cli -g,安装完成之后输入  vue -V(注意这里是大写的“V”),


b、通过以上三步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目

      安装vue脚手架输入:vue init webpack exprice ,注意这里的“exprice” 是项目的名称可以说是随便的起名,但是需要主要的是“不能用中文”。


如上图:一步一步来,就是敲回车,和yes和no,根据提示就是了: Use ESLint to lint your code? (Y/n) n ---------是否启用eslint检测规则,这里强烈建议选no

            这里说明如何启动这个服务;如下:

                cd exprice

                npm install

                npm run dev

之后就会显示如下:表示脚手架已经搭建好了,而且已经启动了这个服务器:



点开就是你搭建的vue项目最原始的样子了,如下图。


在下高姓

推荐阅读更多精彩内容