• vue初尝试--新建项目


    这是一篇技术贴--如何新建一个基于vue的项目

    1、下载对应版本的nodejs安装,下载的nodejs都集成了npm,所以nodejs安装完成之后npm也对应安装完成了。

           安装完成之后可以在cmd命令中查看一下是否安装完成,出现对应的版本号即安装完成。

            node -v                         npm -v

    2、npm成功安装之后,就可以用npm命令安装vue,npm install vue,可能会出现如下错误,那是因为没有package.json文件

           

           当遇到这个问题的时候,再在cmd中执行一下npm init -f,就可以生成package.json文件

           

    3、vue提供官方的命令行工具vue-cli,可以快速搭建大型的单页面应用。只需几分钟就可以搭建。

          #全局安装vue-cli

          $ npm install --global vue-cli

          

    4、cli工具安装完成之后,就可以进入创建vue项目的步骤了,进入你要建项目的目录,创建一个基于webpack(不了解webpack的可以先了解一下)模板的项目

          #创建一个基于webpack模板的新项目

          $ vue init webpack my-project

           

           安装之后会依次填写一些关于项目的信息:

           项目名称、关于项目的描述、作者名称

           到选择Vue build方式时,有两种方式,第一种为standalone方式,第二种runtime-only为runtime方式。

            runtime 打包的是 /node_modules/vue/dist/vue.common.js
            standalone 打包的是 /node_modules/vue/dist/vue.js 

           Vue2.0有两种Build的方式:the standalone build and the runtime-only build(独立构建和运行时构建),可以知道:独立构建包括编译和支持template选项。但也要依赖于浏览器的API,所以不能用于服务端渲染。运行时构建不包括模板编译,并且不支持template选项,只能使用render选项。

            是否安装vue-router(是否安装路由)

            是否使用ESLint规范,ESLint 是用来检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。通过用 ESLint 来检查一些规则,我们可以:

    • 统一代码风格规则,如:代码缩进用几个空格;是否用驼峰命名法来命名变量和函数名等。
    • 减少错误, 如:相等比较必须用 === ,变量在使用前必须被声明,在条件语句中不能使用赋值语句等。
    • 提高代码质量,如:函数最多有多少条件分支;最多有几个参数,代码块最多能嵌套多少层等。
    • 其他。如: 禁用 alert。这可以提高用户体验,因为 alert 框的外观不是那么好看,而且往往与网站的风格不搭,一般都会自定义 alert 框。

           是都建立单元测试代码,可以不建立

    5、项目建立之后在对应的目录下就会出现你刚刚建立的文件夹,进入你建立的文件夹,执行$ cnpm i 命令,会自动安装一些vue项目需要的压缩包之类的文件。

          (cnpm安装:npm install -g cnpm --registry=https:registry.npm.taobao.org    输入cnpm -v查看是否安装成功   因为npm是挂载在国外的所以会比较慢,安装国内的映像会比较快)

    6、安装完成之后运行npm run dev命令运行项目,就可以在浏览器中浏览建立的最简单的vue项目了。

             

  • 相关阅读:
    谈谈MVC项目中的缓存功能设计的相关问题
    MVC 3.0 在各个版本IIS中的部署
    从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
    从零开始学习jQuery (十) jQueryUI常用功能实战
    从零开始学习jQuery (九) jQuery工具函数
    从零开始学习jQuery (八) 插播:jQuery实施方案
    从零开始学习jQuery (七) jQuery动画-让页面动起来!
    从零开始学习jQuery (六) AJAX快餐
    从零开始学习jQuery (五) 事件与事件对象
    从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
  • 原文地址:https://www.cnblogs.com/Iris-mao/p/8243299.html
Copyright © 2020-2023  润新知