xingye 2019-09-08
1.首先具备一定的前端基础,常规的HTML+CSS+Js/jqeury必须熟练,这是后期开发的基础。
2.明白node是什么东西,明白npm能干什么。
3.打开cmd窗口,我用的PowerCmd.
node -v //检查是否安装node npm install webpack -g //webpack是一个包管理工具,也是vue-cli的构建工具,全局安装 npm install vue-cli -g //vue-cli的安装,快速搭建项目的工具 vue -V //查看vue-cli是否安装成功
4.构建工程文件
vue init <template-name> <project-name>
webpack:一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple:一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify:一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple:一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
simple:一个最简单的单页应用模板。
vue init webpack projectName //'git' 不是内部或外部命令,也不是可运行的程序或批处理文件。下载git解决
E:\vue>vue init webpack test ? Project name test//项目名称(注意名称中不要出现大写字母,否则会报错) ? Project description A Vue.js project//项目描述(可写可不写,看个人需要) ? Author//作者(可写可不写,看个人需要) ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? Yes//是否安装vue-router是否安装vue路由工具 ? Use ESLint to lint your code? Yes//是否用ESLint来限制你的代码错误和风格。不需要输入n,需要选择y,如果是大型团队开发,最好是进行配置 ? Pick an ESLint preset Standard ? Set up unit tests No//设置单元测试 ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created?//项目创建后,我们应该为您运行“NPM安装”吗?
使用cmd命令cd移动到项目根目录
npm config get registry//查看npm镜像源https://registry.npmjs.org/ //更改镜像源为淘宝镜像 npm config set registry http://registry.npm.taobao.org npm install //初始化项目,安装package.json 文件中描述的依赖 npm run dev //运行我们的项目,这个时候,我们可以打开浏览器,输入http://localhost:8080/
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT