1.第一步：安装vue-cli

命令行输入cmd或按住shift鼠标右键打开powershell

输入命令

npm install --global vue-cli 按enter键

2.第二步：创建项目

在要创建项目的目录下输入以下命令

vue init webpack projectName（其中projectName为要创建的项目名称）

按下enter键

然后终端会出现下图“一问一答”模式，如图：

这里有几个需要说明一下，没说明的直接回车选择默认

“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车

“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安装单元测试。我们现在还没有单元测试

“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N”。

最后会提示选择管理工具，选择npm或yarn都可以，两者的指令有所不同，这里就选择npm

初始化完成后按照提示进入项目目录，输入 npm run dev启动项目

vue-cli2.0项目的搭建的更多相关文章

  1. Vue cli2.0 项目中使用Monaco Editor编辑器

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  2. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  3. vue/cli2.0优化

    vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...

  4. Vue3.0项目快速搭建

    安装安装vue-cli npm install -g @vue/cli # 或者 yarn global add @vue/cli 创建项目 vue create hello-world 至此项目搭建 ...

  5. vue 3.0 项目搭建移动端 (七) 安装Vant

    # 通过 npm 安装 npm i vant -S 安装完配置 babel.config.js module.exports = { presets: ['@vue/app'], plugins: [ ...

  6. vue 3.0 项目搭建移动端 (六) 命名路由同级控制

    const Tabbar = () => import('@/components/Tabbar'); export default [ { path: '/', name: 'home', c ...

  7. 3 webpack 4 加vue 2.0生产环境搭建

    1 在前两篇笔记中已经能把开发环境弄好了,接来下构建他的生产环境 2 使用npm 安装url-loader和file-loader来支持图片和字体 npm install --save-dev url ...

  8. Vue 2.0 项目在IE下显示空白

    新写的项目在 IE浏览器显示空白 解释一: Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy ...

  9. vue 3.0 体验，vue 3.0新特性

    前言 昨天不是尤雨溪 不是刚在B站 直播玩了,分享了vue-next v3.0.0-beta.1 版本 哈哈, 不要太刺激哦 6大亮点 Performance:性能更比Vue 2.0强. Tree s ...

随机推荐

  1. sql server 综合使用的例子

    exec sp_helptext prosampleoldstyle_usp -- ============================================= -- ========= ...

  2. java利用webuploader实现超大文件分片上传、断点续传

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...

  3. CSP初赛复习

    初赛复习 初赛一定要过啊,否则付出的那么多都白搭了! while(1) ++csp.rp,++csp.luck,++csp.scores; 历史 2020年开始,除NOIP以外的NOI系列其他赛事(包 ...

  4. java循环获取多天时间

    通过开始时间和结束时间循环获取时间: SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd"); Date star ...

  5. Spring注解不生效

    如果在使用spring中,发现注解不生效,检查下如下配置是否配置. 1:一般情况下@Autowired默认是不生效的,配置之后,才会生效 <context:annotation-config / ...

  6. 适当设置，可以让win10显示更加和自己的意思

    一.个性化设置: 1.桌面右击-->个性化-->背景-->图片浏览-->C:\Windows\Web\Screen\img101.png,选择契合度-->适应 2.桌面右 ...

  7. 怎么看部分元素的js代码?

  8. flask上下文流程面试总结

  9. Selenium 常用JS

    滑动scroll: window.scrollTo(0,document.body.scrollHeight);

  10. 标准6轴机器人正反解(1)-坐标系和MDH参数表

    刚来新公司不久,部门给安排了新人作业,我被分到的任务是求标准6轴机器人的正反解,以及利用就近原则选择最优解.从今天开始,逐步将这部分内容总结出来: 本文以及后续文章均使用改进DH法: 连杆坐标系: 坐 ...