电脑安装vue项目原码并建立工程

:2020年03月03日 本站(微博
分享到:

一、npm 版本查看及升级// 查看版本npm -v// 升级版本npm install -g npm注:若npm install 报错 permission denied,使用sudo npm install -g npm二、安装vue相关工具1. 安装vue// 最新稳定版npm insta...

一、npm 版本查看及升级

// 查看版本npm -v// 升级版本npm install -g npm

注:若npm install 报错 permission denied,使用sudo npm install -g npm

二、安装vue相关工具

1. 安装vue

// 最新稳定版npm install vue// 安装vue-cli脚手架构建工具npm install --global vue-cli

安装完成,输入vue -V,如果出现相应的版本号,则说明安装成功。如图:

注:Mac 使用安装vue-cli脚手架的时候报错,
解决方法:
1.切换到/usr/local/lib/node_modules/目录
cd /usr/local/lib/node_modules/
2.删除vue-cli文件夹
open /usr/local/lib/node_modules/
3.重新安装vue-cli
npm install --global vue-cli

2. 安装webpack

npm install --global webpack

npm install --global webpack-cli

安装完成,输入webpack -v,如果出现相应的版本号,则说明安装成功。如图:

三、新建项目

1. 创建新项目

// 创建一个基于 webpack 模板的新项目vue init webpack my-project// 这里需要进行一些配置,默认回车即可

? Project name vue-start //项目名称

? Project description A Vue.js project // 项目描述

? Author  // 作者名称

? Vue build standalone // 推荐选前者

? Install vue-router?

// 是否安装vue-router路由组件,也可不安装使用第三方或简单的项目自己写

? Use ESLint to lint your code?

// 是否使用eslint管理代码,个人项目不推荐

? Set up unti tests?

// 是否使用karma来做单元测试

? Setup e2e tests with Nightwatch?

// 是否安装e2e测试

? Should we run 'npm install' for you after the project has been created?

// 选择使用npm或yarn进行安装模块

2. 运行项目

cd my-project

npm run dev

成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

退出监听,直接关闭cmd窗口即可。

目录结构

  • build -- 大部分是webpack的配置文件

  • config -- 配置文件,比如配置监听端口

  • node_modules -- 依赖包都在这里

  • src -- 主工程文件夹 ,基本上所有的开发都在这个文件夹进行

  • static -- 静态文件目录

  • package.json -- 项目的一些配置信息

文/  王振袢
关键词: 版本 查看 升级 查看 版本

来源:本文内容搜集或转自各大网络平台,并已注明来源、出处,如果转载侵犯您的版权或非授权发布,请联系小编,我们会及时审核处理。
声明:江苏教育黄页对文中观点保持中立,对所包含内容的准确性、可靠性或者完整性不提供任何明示或暗示的保证,不对文章观点负责,仅作分享之用,文章版权及插图属于原作者。

您在阅读:电脑安装vue项目原码并建立工程

Copyright©2013-2020 JSedu114 All Rights Reserved. 江苏教育信息综合发布查询平台保留所有权利

苏公网安备32010402000125苏ICP备14051488号-3南京思必达教育科技有限公司版权所有

技术支持:南京博盛蓝睿网络科技有限公司  

最热文章
最新文章
  • 卡尔蔡司镜片优惠店,镜片价格低
  • 苹果原装手机壳