vue的使用有3种方式(http://www.runoob.com/vue2/vue-install.html),第一种便是在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
在做项目的情况下,都是用的npm下载:
一、安装环境:
在https://nodejs.org/en/中下载node,运行npm -v 查看版本号(如果有版本号,则表示安装环境成功)。由于 npm 安装速度慢,为了提高效率,可以使用淘宝的镜像:http://npm.taobao.org/
二、搭建vue项目环境
npm install vue
全局安装 vue-cli:
cnpm install --global vue-cli
vue init webpack 项目名称:
三、安装并运行项目:
cd (项目名称) 进入项目文件中
npm install
npm run dev 运行项目
四、项目目录(初始):
build:构建脚本目录
build.js:生产环境构建脚本;
check-versions.js:检查npm,node.js版本;
utils.js:构建相关工具方法;
vue-loader.conf.js: 配置了css加载器以及编译css之后自动添加前缀;
webpack.base.conf.js:webpack基本配置;
webpack.dev.conf.js: webpack开发环境配置;
webpack.prod.conf.js:webpack生产环境配置;
config:项目配置
dev.env.js:开发环境变量;
index.js:项目配置文件;
prod.env.js : 生产环境变量;
test.env.js :测试环境变量;
node_modules:npm 加载的项目依赖模块
src:开发的目录:
assets:资源目录,放置一些图片或者公共js、公共css。(会被webpack构建);
components:组件目录;
router:前端路由;
App.vue:项目根组件;
main.js:入口js文件;
static:静态资源目录(不会被webpack构建)
index.html:首页入口文件
test :测试文件目录;
package.json:npm包配置文件,定义项目的npm脚本,依赖包等信息
README.md:项目的说明文档