1.首先,打开命令行工具(win+r,然后输入cmd),

2.输入node -v,若出现相应版本号表示已经安装过了;若没有则安装node.js,从node.js官网下载并安装node,安装过程很简单,一直“下一步”即可。注意:在官网下载安装node.js后,就已经自带npm (包管理工具)了,另需注意的是npm的版本最好是3.x.x以上,以免对后续产生影响。

3.然后,安装淘宝镜像,打开命令行工具,输入  npm install -g cnpm --registry= https://registry.npm.taobao.org  ,按回车就会自动安装。安装淘宝镜像的原因是:我们用的npm的服务器在国外,有时候我们安装依赖的话会很慢很慢,所以就用这个cnpm来安装我们需要的依赖。安装完成后输入 cnpm -v,若出现相应的版本号则表示安装成功。

4.接下来安装Vue脚手架:

全局安装vue-cli,也就是所谓的脚手架。

  1.    用npm安装(国际开源库生态系统)                                                                                                                                             
    npm install -g vue-cli
  2.     用cnpm安装(使用国内镜像安装)
    cnpm install -g vue-cli

  3. 然后在命令行输入vue -V,若出现相应的版本号则安装成功。

5.准备工作已经完毕,下面直接使用vue-cli初始化webpack项目,:

在命令框内输入vue,可以看到命令描述:

输入vue list 查看可安装的vue模板,

输入如下,搭建项目:

vue init webpack myproject(你的项目名称)

中间会输入项目名称,项目描述,作者等信息,一路回车,可以看到我们刚才创建的webpack项目已经建好了,

6.查看目录结构:

cd myproject

需要注意的是项目的名称不能大写,不然会报错

Project name (my-project) # 项目名称(我的项目)

Project description (A Vue.js project) # 项目描述一个Vue.js 项目

Author 作者(你的名字)

Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)

Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)

Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)

当然这些都看你自己个人的情况,我这里是全选了是。

7.安装依赖:

刚初始化的项目是没有依赖的,如果运行回报类似的错误,

所以在这之前要解决项目的依赖问题,使用下面的命令安装项目的依赖:

npm install

国内有些包npm无法安装,可以使用cnpm进行安装。

8.启动本地开发:

npm run dev

 

本地node服务器已经跑起来了,端口为配置文件中的端口。

9.打包上线:

npm run build

看到build complete 证明打包成功。

观察目录结构,发现多了一个dist文件夹,这便是webpack打包之后的文件,将该文件和后台商量,以什么形式放到服务器上即可,上线成功。

番外:

上面脚手架给我们把常用的插件下载并配置起来,比方说路由,以及ES6转成ES5的插件。在做项目的过程我们常常用到数据的传输和各个组件的管理,所以接下来还需安装一些插件:

安装vue-resource是用于ajax请求的vue插件,用来和服务器端进行数据通信:

npm install vue-resource --save

安装vuex是用于管理每个组件之间的状态值的改变:

npm install vuex --save

另外,如果浏览器页面打不开或者是没有加载页面,有可能是本地8080端口被占用,又或者是你关闭了这个窗口。

解决办法:

针对第一种情况,修改配置文件就好了,打开项目找到 config/index.js  

建议将端口号改为不常用的端口。

针对第二种情况,重新启动一下JavaScript的运行环境就好。 

Logo

前往低代码交流专区

更多推荐