美文网首页
vue从开发环境搭建到建立到第一个项目-新手必看

vue从开发环境搭建到建立到第一个项目-新手必看

作者: 小白中的小白丶 | 来源:发表于2019-04-10 01:02 被阅读0次

(一) 关于mac

  • 开发环境:
    Homebrew ( Mac的包管理神器 ) → Node.js → cnpm(淘宝镜像,节省安装时间) → webpack → vue-cli(vue脚手架) → IDE( Vue开发我用的是VSCode )

  1. 打开terminal 安装homebrew
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  2. 安装node.js
  • 直接在node.js官网下载安装,全程傻瓜式安装。node.js是自带npm的,npm在后面安装别的环境需要用到。
  • 安装完后,我们可以通过在terminal中输入 node -v ,npm -v 分别检查node.js 和npm 的版本--
  • mac 这里需要注意!!要给npm安装目录访问权限,否则npm安装别的东西都会失败(至少我是这样子...)
    sudo chmod -R 777 /usr/local/lib/node_modules/
  1. 安装cnpm
    在terminal里输入
    npm install -g cnpm --registry=https://registry.npm.taobao.org

  2. 安装webpack
    cnpm install webpack -g
    在terminal中输入webpack -v检查是否安装成功以及查看版本号

  3. 安装vue-cli
    npm install vue-cli -g
    在terminal中输入vue -V(注意这里是大写V)检查是否安装成功以及查看版本号

  4. 安装VSCode

(二) 关于windows

https://www.cnblogs.com/zhaomeizi/p/8483597.html

很详细的步骤,一步一步的按照操作来,记得用管理员的terminal去运行npm的指令,管理员的terminal这样去打开。这样在加载淘宝镜像的时候可以不报错。


勾选对号

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

This will install Vue 2.x version of the template. 
For Vue 1.x use: vue init webpack#1.0 projectname
? Project name (projectname) 
? Project name projectname
? Project description (A Vue.js project) 
? Project description A Vue.js project
? Author Joe --------------------- 项目创建者
? Author Joe
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用ESLint
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "projectname".
To get started: --------------------- 这里说明后续的三个步骤
cd projectname
npm install
npm run dev
  1. 项目名称、关于项目的描述、作者名称
  • 找一个放工程的文件夹,terminal cd 到该目录,mac下可以直接把文件夹拖到terminal ,会自动填入路径
  • 使用vue-cli创建项目,需要注意项目的名字不能用中文
    vue init webpack-simple projectname
  • 到选择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选项。
  1. 是否安装vue-router(是否安装路由)
  2. 是否使用ESLint规范,ESLint 是用来检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。通过用 ESLint 来检查一些规则,我们可以统一代码风格规则,如:代码缩进用几个空格;是否用驼峰命名法来命名变量和函数名等。减少错误, 如:相等比较必须用 === ,变量在使用前必须被声明,在条件语句中不能使用赋值语句等。提高代码质量,如:函数最多有多少条件分支;最多有几个参数,代码块最多能嵌套多少层等。其他。如: 禁用 alert。这可以提高用户体验,因为 alert 框的外观不是那么好看,而且往往与网站的风格不搭,一般都会自定义 alert 框。
  3. 是否建立单元测试代码,可以不建立
  • 项目建立之后在对应的目录下就会出现你刚刚建立的文件夹,进入你建立的文件夹,执行$ cnpm i 命令,会自动安装一些vue项目需要的压缩包之类的文件。

(四) 创立完成之后会在项目文件夹下自动生成如下目录,用自己选择的IDE,例如Vscode直接打开该文件夹即可。

项目目录

(五) 详细的文件夹及文件介绍:

项目目录介绍

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

  • 如果没有自动跳出来,记得在浏览器里输入localhost:8080


    vue页面

(七) 注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用。

  • 当然这个端口也是可以修改的,在根目录的config文件夹下有个index.js文件,除了修改端口,还可以根据需要改变其他配置信息。


    端口

相关文章

网友评论

      本文标题:vue从开发环境搭建到建立到第一个项目-新手必看

      本文链接:https://www.haomeiwen.com/subject/ugxgiqtx.html