Vue入门学习日记

Posted lujiangping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue入门学习日记相关的知识,希望对你有一定的参考价值。

一、环境搭建:

1. 安装Nodejs

官网下载后,输入node -v 查看node版本号

2. 安装淘宝镜像cnpm或者yarn

打开终端,设置淘宝 npm 镜像,输入:

npm config set registry https://registry.npm.taobao.org

         或者:npm install -g cnpm --registry= https://registry.npm.taobao.org

安装完后输入 cnpm -V 查看版本号

3. 全局安装 vue-cli

cnpm install -g vue-cli (在mac上出现错误时吗,加上sudo)

安装后输入 vue -V查看版本号

 

二、构建项目:

1.初始化项目

vue init webpack gshop

# vue init 是vue初始化项目
# webpack 是打包工具,其中也可以使用Browserify,感兴趣可以自行研究
# project 是自定义的项目名称

cd gshop

npm install

npm run dev

 

执行命令时会显示下列选项:

$ vue init webpack project--------------------- 安装vue脚手架的命令,采用webpack打包工具,项目名是project
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 project
? Project name (project) ---------------------项目名称
? Project name project
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author wujy--------------------- 项目创建者
? Author wujy
? 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检测规则,这里个人建议选no,因为这里有很多的坑,具体以后会讲
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) n  ----------------是否安装单元测试,因人而异,可以自行选择
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n  --------------------是否安装e2e测试,可自行选择
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "project".
To get started: --------------------- 这里说明如何启动这个服务
cd project   --------------------进入项目文件夹
npm install      ---------------------安装依赖,推荐使用淘宝镜像cnpm
npm run dev  -----------------------项目运行

2.运行项目

cd project ------进入工程目录

cnpm install -----安装包依赖

cnpm run dev ----运行项目(或者cnpm start)

打开chorme 输入 http://localhost:8080

 

3.打包,用于正式环境

cnpm run build

 

三、文件目录分析

build    -------------------项目构建相关代码(webpack配置)
    build.js  -------------生产环境构建代码
    check-versions.js  ----------检查node、npm等版本
    utils.js  ------------------------构建工具相关
    vue-loader.conf.js  ---------css加载器的配置
    webpack.base.conf.js  ---webpack的基础配置信息
    webpack.dev.conf.js  -----webpack开发环境配置信息,构建开发本地服务器
    webpack.prod.conf.js  ---wenpack生产环境配置信息
config    -------------------配置目录,包括端口号,打包输出等的vue基本配置文件
    dev.env.js  -----------开发环境变量
    prod.env.js -----------生产环境变量
    index.js  -------------项目的配置变量,端口号等 
node_modules    -----------加载的项目依赖模块
static    -------------------静态资源目录
index.html    ---------------首页的入口文件,可以添加meta等参数
README.md    ---------------项目的说明文档,makedown格式
src    -----------------------源码目录,主要的开发
    assets  ---------------静态资源,css,image等可以存放
    components  -----------公共组件
    router  ---------------路由文件夹,配置页面跳转
    views  ----------------页面编写的地方,(可以自行定义命名)
main.js  ------------------入口文件,全局的配置和加载
.babelrc  -----------------ES6语法编译配置,用来将es6代码转换成浏览器可识别的es5代码
.gitignore  ---------------git上传需要忽略的文件的格式
package.json  -------------项目的基本信息,包括开发所需要的模块、项目名称、版本号等
.postcssrc.js  ------------转换css的工具
.editorconfig  ------------定义代码格式

备注:

强制清除 npm包缓存 npm cache clean --force 

需要package.json才能npm install

 

以上是关于Vue入门学习日记的主要内容,如果未能解决你的问题,请参考以下文章

谷粒商城学习日记(18)——Vue语法入门

vue学习日记:vue路由搭建

谷粒商城学习日记(21)——Vue生命周期

Vue学习日记——Vue核心思想

Egret入门学习日记 --- 第六十四篇(书中 19.4 节 内容)

Egret入门学习日记 --- 问题汇总