VUE示例

一、安装node环境
安装成功后，输出版本号测试，如图表示安装成功。

二、搭建vue项目环境
1、全局安装vue-cli
npm install --global vue-cli
安装成功后，可以使用vue命令

2、创建项目
（1）新建项目空间 D:ZSZJ_HTMLvue
（2）创建一个基于 webpack 模板的新项目: vue init webpack vue-demo01


vue脚手架搭建报错,执行下列两个命令，既可以创建
npm i vue-cli -g
npm install -g webpack

继续执行命令 vue init webpack vue-demo01

说明：
Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

3、进入项目：cd vue-demo，安装依赖
项目创建后，若没有node_modules,则执行命令 npm i ，下载相关依赖

4、npm run dev，启动项目
进入项目目录 cd vue-demo01

访问地址：http://127.0.0.1:8080

三、vue项目目录讲解

1、build：构建脚本目录
　　　　1）build.js ==> 生产环境构建脚本；
　　　　2）check-versions.js ==> 检查npm，node.js版本；
　　　　3）utils.js ==> 构建相关工具方法；
　　　　4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
　　　　5）webpack.base.conf.js ==> webpack基本配置；
　　　　6）webpack.dev.conf.js ==> webpack开发环境配置；
　　　　7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
　　　　1）dev.env.js ==> 开发环境变量；
　　　　2）index.js ==> 项目配置文件；
　　　　3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
　　　　2）components：组件目录，我们写的组件就放在这个目录里面；
　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；
　　　　4）App.vue：根组件；
　　　　5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

四、开发vue项目业务开发
1、在components目录下新建一个views目录，里面写我们的vue组件
D:ZSZJ_HTMLvuevue-demo01srccomponents

1）开始我们的第一个组件：
a：在views目录下新建First.vue
b：在router目录下的index.js里面配置路由路径
D:ZSZJ_HTMLvuevue-demo01srcrouter


c：template 写 html，script写 js，style写样式
D:ZSZJ_HTMLvuevue-demo01srccomponentsviews


d：输入ip： http://localhost:8010/#/first

yarn的安装及应用
npm install -g yarn
查看版本：yarn --version

yarn的常用命令：
（1）创建文件夹 md yarn
（2）进入yarn文件夹 cd yarn
（3）初始化项目 yarn init // 同npm init，执行输入信息后，会生成package.json文件
（4）yarn的配置项：

1. yarn config list // 显示所有配置项
2. yarn config get //显示某配置项
3. yarn config delete //删除某配置项
4. yarn config set [-g|–global] //设置配置项
   （5）安装包：
5. yarn install //安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
6. yarn install --flat //安装一个包的单一版本
7. yarn install --force //强制重新下载所有包
8. yarn install --production //只安装dependencies里的包
9. yarn install --no-lockfile //不读取或生成yarn.lock
10. yarn install --pure-lockfile //不生成yarn.lock
    （6）添加包（会更新package.json和yarn.lock）：
11. yarn add [package] //在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
12. yarn add [package]@[version] // 安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
13. yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest） //不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型：
14. yarn add --dev/-D // 加到 devDependencies yarn add --peer/-P // 加到 peerDependencies
15. yarn add --optional/-O // 加到 optionalDependencies //默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：
16. yarn add --exact/-E // 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
17. yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0
    （7）发布包
    yarn publish
    （8）移除一个包
    yarn remove ：移除一个包，会自动更新package.json和yarn.lock
    （9）更新一个依赖
    yarn upgrade 用于更新包到基于规范范围的最新版本
    （10）运行脚本
    yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本
    （11）显示某个包的信息
    yarn info 可以用来查看某个模块的最新版本信息
    （12）缓存
    yarn cache
    yarn cache list # 列出已缓存的每个包 yarn cache dir # 返回 全局缓存位置 yarn cache clean # 清除缓存

最后

以上就是超帅哈密瓜为你收集整理的VUE示例的全部内容，希望文章能够帮你解决VUE示例所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。