电子商务网站规划与设计试题,新泰网站开发,腾讯广告服务商平台,成品网站1688网页Vue.js的安装
安装Vue.js有两种方法#xff1a;
#xff08;1#xff09;类似于Bootstrap或jQuery#xff0c;直接通过HTML文件中的标签引用。为了方便开发者使用#xff0c;Vue.js提供了相关的CDN#xff0c;通过如下代码可以引用最新版本的Vue.js#xff1a; sc…Vue.js的安装
安装Vue.js有两种方法
1类似于Bootstrap或jQuery直接通过HTML文件中的标签引用。为了方便开发者使用Vue.js提供了相关的CDN通过如下代码可以引用最新版本的Vue.js script srchttps://cdn.jsdelivr.net/npm/vue/script通过指定版本号可以引用不同版本的Vue.js这样项目工程不会因为新版本的Vue.js而出现不兼容的问题。 script srchttps://cdn.jsdelivr.net/npm/vue2.6.10/dist/vue.js/script除了CDN方式外还可以下载源代码直接引入。对于一个大型项目而言直接引入JavaScript文件的方式可能并不便捷所以笔者采用npm的安装方式。
2npm安装方式。 新建项目文件夹使用npm init命令初始化项目然后使用如下命令安装Vue.js与Express的安装步骤一样。 npm install vue package.json文件会自动添加Vue.js的依赖项代码如下 {name: 2-3-2,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1},author: ,license: ISC,dependencies: {vue: ^2.6.10}}用Vue.js编写Hello World——CDN方式介绍了安装Vue.js的两种方式第一种是通过CDN方式或引入静态文件通过CDN方式编写Hello World程序较为简单下面直接演示。
【示例】用Vue.js编写HelloWorld——1。 新建HTML文件命名为index.html引入Vue.js。完整的代码如下 01 !--HelloWorld--02 html langen03 head04 meta charsetUTF-805 titleTitle/title06 /head07 body08 div idapp09 !--显示文字内容--10 {{text}} 11 /div12 !--引入Vue-- 13 script srchttps://cdn.jsdelivr.net/npm/vue/script14 script15 !--实例化Vue--16 var vm new Vue({17 el: #app, //指定属性id里的app18 //数据内容19 data: {20 text: hello world!!!21 }22 })23 /script24 /body25 /html 通过浏览器打开index.html网页效果如图 用Vue.js编写Hello World——Webpack方式
对于Vue.js框架而言输出一个简单的Hello World程序可能并不简单浏览器本身不识别后缀为vue的文件所以vue文件不能通过浏览器直接打开类似于HTML这样的页面也无法直接引入vue文件。 如果想要使用Vue.js编写程序需要Webpack打包工具将.vue文件编译成普通的JavaScript文件再通过页面的引入去执行这个JavaScript文件。
【示例2-5】用Vue.js编写HelloWorld——2。
1新建项目工程使用npm init初始化项目代码此时生成package.json文件接着安装Webpack命令如下 npm install webpack
2Webpack安装后需要再安装webpack-cli一个使用Webpack的命令行工具命令如下 npm install webpack-cli
3安装Vue.js命令如下 npm install vue
4安装vue-loader和vue-template-compiler这样才可以让Webpack识别Vue.js安装命令如下 npm install vue-loader npm install vue-template-compiler
安装完成后的package.json文件如下 {name: 2-3-2,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1},author: ,license: ISC,dependencies: {vue: ^2.6.10,vue-loader: ^15.7.1,vue-template-compiler: ^2.6.10},devDependencies: {webpack: ^4.39.3,webpack-cli: ^3.3.7}5新建一个webpack.config.js文件用于配置Webpack打包工具。Webpack的配置需要指定入口文件并且引入vue-loader完整的代码如下 01 const path require(path);02 const VueLoaderPlugin require(vue-loader/lib/plugin);03 04 module.exports {05 //指定入口文件06 entry:path.join(__dirname, app.js),07 //指定输出的文件位置和文件名称08 output: {09 path: path.join(__dirname,dist),10 filename: build.js11 },12 plugins: [13 //在使用新版的vue-loader时必须引入这个插件14 new VueLoaderPlugin()15 ],16 module: {17 //指定不同格式的规则18 rules: [19 //解析.vue文件20 {21 test: /\.vue$/,22 loader: vue-loader23 },24 ]25 }26 }这里指定了入口文件导出的位置和引入模块时的一些规则通过这个配置让Webpack可以编译同级目录中的app.js文件并且在dist文件夹中建立新的build.js作为导出的文件。
6编辑app.js中的内容。在app.js中需要引入Vue.js、获取页面中的body节点并且将所有需要显示的内容挂载在上面完整的代码如下 01 //引入vue02 import Vue from vue03 import Hello from ./helloworld.vue;04 05 const root document.createElement(div)06 document.body.appendChild(root)07 08 //mount将Hello模块挂载到root根节点中09 new Vue({10 render: (h) h(Hello)11 }).$mount(root)7上述代码引入了一个还未建立的Hello模块其文件名为helloworld.vue也就是本例的Vue.js部分该文件中指定了一个变量赋值为HelloWorld并显示在页面上。 01 template02 div03 p{{text}}/p04 /div05 /template06 07 script08 export default{09 name: Hello,10 data(){11 return {12 text: HelloWorld!!!13 }14 }15 }16 其中{{text}}部分显示下方script/data中text的值“HelloWorld!!!”而模板的部分将会被挂载在一个HTML文件的body节点中最终将所有的内容显示在页面中。
8Hello World实例到此就完成了。在命令行中使用如下命令打包 webpack --config webpack.config.js 也可以将此命令添加到package.json中通过webpack-cli的方式使用这样会更加方便。修改后的代码如下
{name: 2-3-2,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1,build: webpack --config webpack.config.js},author: ,……}在命令行窗口中使用如下命令完成打包操作 npm run build
