0.利用vue-cli新建一个vue项目

        有三种方式创建vue项目,1.本地引入vuejs、2.使用cdn引入vuejs、3.使用vue-cli创建vue项目。其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广泛。

        下面介绍利用vue-cli创建项目的具体步骤:

        首先,检查电脑上是否已安装好了npm  因为所有的依赖都要依靠npm来安装(终端中执行npm -v查看版本,有则已安装,提示错误则是没安装,需要前去下载),接下来:


 一.安装vue-cli:  

            1.终端中进入想要放置新项目的文件夹目录,

            2.执行npm  install  -g vue-cli  或者是  cnpm i -g vue-cli

            ("-g"表示全局安装,如果不加"-g"会在当前文件夹下生成vue-cli的依赖包:node-modules,建议加上"-g",cnpm是走国内安装的路线,npm下载不成功时可使用)

            3.下载完成后,  在终端中输入vue -v  查看版本,显示版本则表示下载成功.


二.利用vue-cli创建vue项目:

            终端中执行命令: vue init webpack demo(demo是自定义的项目名);

            此时终端会出现一系列操作提示:

                Project name(工程名):回车

                Project description(工程介绍):回车

                Author:作者名

                Vue build(是否安装编译器):回车

                Install vue-router(是否安装Vue路由):回车

                Use ESLint to lint your code(是否使用ESLint检查js代码):n

                Set up unit tests(安装单元测试工具):n

                Setup e2e tests with Nightwatch(是否安装端到端测试工具):n

                Should we run npm install for you after the project has been created? (recommended):回车。


                一切完成之后就创建了一个新项目的基础架构.


三.启动项目:

            1.进入项目目录:cd demo

            2.安装项目所需要的依赖:npm install

            3.启动项目:npm run dev


         启动成功以后,浏览器打开:localhost:8080,即可看到vue项目,如果浏览器不自己打开,就手动打开浏览器,输入网址即可看到vue项目的页面("8080"是端口,可在vue项目里自己进行设置)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容