前端搭建vue项目

2019-03-05  本文已影响0人  知文图鉴

1、打开node.js官网https://nodejs.org/en/下载当前版本node.js并安装到电脑中,安装方式为"无脑安装之下一步"

安装完成后检验是否安装node.js:

        win+r输入cmd打开dos窗口输入node -v回车之后会显示node.js版本号,证明电脑安装成功了!

        npm集成在node.js中,在dos窗口输入npm -v回车之后会显示npm版本!

2、利用淘宝镜像安装cnpm,在命令行中输入npm install -g cnpm --registry=https://registry.npm.taobao.org,

安装成功之后输入cnpm install -g vue-cli来安装vue-cli脚手架

3、开始创建vue项目,例如要在D盘创建vue项目。

        dos命令行输入D: 进到D盘目录cd D:vueProject进入vueProject文件夹,输入vue init webpack projectName创建新的vue项目,其中projectName为项目名称,可设为任意名称。

回车之后会出现vue项目的配置属性:
        Project name为项目名称
        Project description为项目描述
        Author为项目作者
        Vue build为webpack配置文件默认回车就好
        Install vue-router?是否安装路由配置
        Use ESLint to lint your code?为eslint校验js代码语法的插件(可装可不装)
        Set up unit tests?为设置测试单元默认No就可以
        Setup e2e tests with Nightwatch?为vueE2E测试
        Should we run 'npm install' for you after the project has been created?(recommended)默认npm安装
例如:

4、安装项目依赖
        dos窗口定位到项目路径cd D:vueProject\projectName,然后输入cnpm install安装项目所需依赖包资源。

5、安装成功之后运行
        dos窗口定位到项目路径cd D:vueProject\projectName,然后输入npm run dev回车运行项目,项目路径为http://localhost:8080

6、编辑器开发工具
        推荐HbuilderX编辑器下载地址:http://www.dcloud.io/hbuilderx.html

原创文章链接:http://www.zhicaipt.cn/hz_index/view/article_detail.html?id=47

上一篇下一篇

猜你喜欢

热点阅读